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