如何使用React.js将状态属性传递给构造函数中的子组件?

时间:2019-03-14 18:24:01

标签: javascript reactjs this bind prop

如何在构造函数中将父组件的状态属性作为子组件的道具传递?我有这样的东西:

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的错误是不确定的。 是否可以将状态的“ this”绑定为子组件的道具?

2 个答案:

答案 0 :(得分:2)

在状态上存储组件不是一个好主意。您只需在render

中进行定义

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

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

方法

答案 1 :(得分:2)

您甚至在this.state内部使用undefined,甚至没有对其定义和分配值。这就是class FatherComponent extends Component { constructor(props) { super(props); this.state = { status: true }; } render() { return ( <div> <ChildComponent statusAsProps={this.state.status} /> </div> ) } } 的原因。避免复杂性,只需从父级状态传入所需的道具即可渲染子级组件。

v <- c("blabla que 1", "blabla que eu Boqueirão que ")
gsub(".*que", "", v)
# [1] " 1"   "irão"