javascript - 从父级下拉菜单中 react 设置子级状态

Question

我有2个js文件。我想从 Component1 更改 Component2 的状态。

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>
        )
    }

我要设置enable: true在 Component2 中通过 <option> 。

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 将数据从父级状态传递给子级(不需要绑定(bind)父级和子级的状态，或使用 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>