Как передать свойство состояния дочернему компоненту в конструкторе с React.js?

Question

Как передать свойство состояния родительского компонента в качестве подпорки для дочернего компонента в конструкторе? У меня есть что-то вроде этого:

class FatherComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      status: true
      components: [
        { component: (
            <ChildComponent
              statusAsProps={this.state.status} />
          )
        }
      ]
    };
  }

render(){
  return(
     <div>{this.state.components[0].component}</div>
  )
}

Но показывает, что ошибка this.state не определена. Является ли способ связать "это" состояния как опору для компонента детей?

Answer 1

Вы используете this.state внутри себя, прежде чем оно будет даже определено и присвоено значение. Вот почему undefined. Избегайте сложности и просто визуализируйте дочерний компонент, передавая необходимые реквизиты из состояния родителя.

class FatherComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      status: true
    };
  }

  render() {
    return (
      <div>
        <ChildComponent statusAsProps={this.state.status} />
      </div>
    )
  }
}

Answer 2

Не рекомендуется хранить компоненты в состоянии.Вы можете просто определить это в вашем render

class FatherComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      status: true
    };
  }

render(){
  return(
     <div>
      { <ChildComponent statusAsProps={this.state.status} }
     </div>
  )
}

метод