当前位置:  开发笔记 > 编程语言 > 正文

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

如何解决《如何将父状态传递给其子组件?》经验,为你挑选了1个好方法。

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

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

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



1> challenger..:

如果你想通过状态{name:"helloworld"}就这样做:

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

在子组件中,您可以执行以下操作:

{this.props.name}

但是如果你想将组件的道具传递给它的孩子:

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

在子组件中,您可以执行以下操作:

{this.props.stuff}//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( 
      
     ); 
    } 
  }

然后在子组件中,您可以使用此: this.props.update('new name')

UPDATE

使用更多的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 ','
      
     ); 
    } 
  }

推荐阅读
夏晶阳--艺术
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有