Как получить this.props в конструкторе?

188

25 июня 2019, 20:10

Как я могу применить this.props внутри конструктора?

import React from 'react'; 
 
import Electron from '../Electron' 
 
class Arbital extends React.Component { 
 
 
	constructor() { 
		super(); 
		this.arbitalWidth = document.querySelectorAll('.animate-electron__arbital')[this.props.arbitalNum]; 
	} 
 
 
	render() { 
 
		 
		return( 
			<div className="animate-electron__arbital"> 
				<Electron arbitalNum={this.props.arbitalNum} /> 
			</div> 
		) 
	} 
} 
 
export default Arbital;

Answer 1

Немного упрости все но думаю все будет понятно:

class Arbital extends React.Component { 
  constructor() { 
    super(); 
    this.state = {width:0} 
    this.myRef = React.createRef(); 
  } 
 
  componentDidMount() { 
    const div = this.myRef.current 
    this.setState({width:div.getBoundingClientRect().width})  
  } 
 
  render() { 
    const {width} =  this.state 
    return ( 
      <div ref={this.myRef} className="animateelectron__arbital">{width}</div> 
    ) 
  } 
} 
 
ReactDOM.render(<Arbital />, document.querySelector('main'))

<script src="//cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> 
 
<main></main>

Answer 2

class Arbital extends React.Component {
  constructor(props) {
    super(props);

Нечего из конструктора по DOM'у лазить.

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Почему не срабатывает ajax запрос к файлу data.json?

Подскажите пожалуйста, почему не срабатывает ajax запрос к файлу datajson? Где ошибка? По идее должен был добавиться еще 1 блок, но почему-то ни в консоль...

180

javascript

Не обновляется Field в Redux-form

Вот такой код:

165

javascript

onMouseEnter и тачпад

Дело в том что на блоке стоит обработчик onMouseEnter

180

javascript

Как добавить в масив только уникальные обьекты ?

У меня есть масив с обьектами:

172