如何将父状态传递给其子组件？

如果您想通过状态{name：“ helloworld”}，请按照以下步骤操作：

class App extends React.Component {constuctor(props)  {     super(props);     this.state = {name:"helloworld"};} render() {   return(    <ChildComponent {...this.state} />   );  } }

在子组件中，您可以执行以下操作：

<Text>{this.props.name}</Text>

但是，如果要将组件的道具传递给它的子组件，则：

   class App extends React.Component {    constuctor(props)  {         super(props);         this.state = {name:"helloworld"};    }     render() {       return(        <ChildComponent {...this.props} />      );      }     }

在子组件中，您可以执行以下操作：

<Text>{this.props.stuff}</Text>//place stuff by any property name in props

现在，如果您想从子组件中更新父组件的状态，则需要将一个函数传递给子组件：

 class App extends React.Component {    constuctor(props)  {         super(props);         this.state = {name:"helloworld"};    }    update(name){       this.setState({name:name})// or with es6 this.setState({name})    }    render() {      return(       <ChildComponent {...this.props, update: this.update.bind(this)} />     );     }   }

然后在子组件中可以使用：

this.props.update('new name')

更新

使用更多es6并删除构造函数

class App extends React.Component {    state = {name:"helloworld"};    // es6 function, will be bind with adding .bind(this)    update = name => {       this.setState({name:name})// or with es6 this.setState({name})    }    render() {      // notice that we removed .bind(this) from the update     return(     //send multiple methods using ','      <ChildComponent {...this.props, update = this.update} />     );     }   }