从父下拉菜单中反应设置子状态

Question

我有 2 个 js 文件。我想从组件 1 更改组件 2 的状态。

class Component1 extends React.Component {
constructor(props) {
super(props);          
this.state = {
enable: false
};
this.enable = React.createRef();
this.selector = this.selector.bind(this);
selector() {
this.setState({
enable: true,
})
}
render() {
return ( 
<div>
<select><option>ENABLE</option></select>
<OtherComponent>
<Component2 enable={this.state.enable} />  
</OtherComponent>
</div>
)
}

我想通过<option>在组件 2 中设置enable: true。

class Component2 extends React.Component {
constructor(props) {
super(props);
this.state = {
enable: false
}
}
componentWillReceiverProps(nextProps) {
this.setState({ enable: nextProps.enable, })
}
render()
return <div>{this.state.enable}</div>

我以前没有在 render(( 中使用嵌套组件结构尝试过这个。

Answer 1

我们使用 props 将数据从父级的状态传递给子级(不需要绑定父级和子级的状态，或使用 Refs，或者尝试涉及生命周期方法(：

const { render } = ReactDOM
class Component2 extends React.Component {
render(){
return (
<div>
Enabled: {this.props.isEnabled ? 'true' : 'false'}
</div>
)
}
}
class OtherComponent extends React.Component {
render(){
return <div style={{backgroundColor:'black', color:'white', width:100}}>{this.props.children}</div>
}
}
class Component1 extends React.Component {
constructor(props) {
super(props)
this.selector = this.selector.bind(this)
this.state = {
enable: false
}
}

selector() {
this.setState({
enable: true
})
}
render() {
return ( 
<div>
<select onChange={this.selector}><option /><option>ENABLE</option></select>
<OtherComponent>
<Component2 isEnabled={this.state.enable} />  
</OtherComponent>
</div>
)
}
}

render (
<Component1 />,
document.getElementById('root')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script><div id="root"></div>