我是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中编码所以我有这个问题.
如果你想通过状态{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 ','); } }