我是 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>
但是如果你想把组件的 props 传递给它的子组件：
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} />
);
}
}
如果你想发送整个状态：
return( <ChildComponent {...this.state} /> );
但这可能是个坏主意:)
编辑：在您的场景中，这会向值为“helloworld”的子组件发送一个“name”属性