Как передать родительское состояние его дочерним компонентам?

Я новичок в React ES6, и я думаю, что я неправильно изменяю состояние. Мой код выглядит так, когда я устанавливаю состояние на родительский компонент:

Моя проблема заключается в других дочерних компонентах, я должен делать это повторительно, есть ли другой способ сделать это? У меня нет проблем с React.createClass, но я хочу код в es6, поэтому у меня есть эта проблема.

Ответы

Ответ 1

Если вы хотите передать состояние {имя: "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} />
     ); 
    } 
  }

Ответ 2

если вы хотите отправить целое состояние:

return( <ChildComponent {...this.state} /> );

Но это, вероятно, плохая идея:)

edit: в вашем сценарии это отправляет свойство 'name' дочернему компоненту со значением 'helloworld'