Question

我是React ES6的新手，我想我正在以错误的方式修改状态。当我在父组件上设置状态时，我的代码是这样的：

class App extends React.Component  {
constuctor(props)  {
     super(props);
     this.state = {name:"helloworld"};
}
 render() { 
  return( 
   <ChildComponent parentObj={this} /> // parentObj for parent context as props on child components  
  ); 
 } 
}

我的问题是在其他子组件中，我必须重复这样做，还有另一种方法吗？我没有React.createClass的问题，但我想在es6中编码所以我有这个问题。

Answer 1

如果你想通过状态{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( 
      <ChildComponent {...this.props, update: this.update} />
     ); 
    } 
  }

Answer 2

如果你想发送整个州：

logger1 = logging.getLogger('error-admin')
logger2 = logging.getLogger('error-user')

但这可能是一个坏主意：）

编辑：在您的方案中，这会发送一个名称＆＃39;财产到儿童组件，价值为＆＃39; helloworld＆＃39;

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

2 个答案: