javascript - ReactJS:如何获取另一个组件的状态属性？

Question

有一个主要组件，它使用菜单组件。菜单组件使用状态属性来保存有关所选菜单项的信息。但现在我需要在主组件中获取选定的模块。我该怎么做？

class Main extends Component {
    doSomething(module) {
        console.log(module) // should get 'targetValue'

        // I need to get the info, which module is selected.
        // This info is stored as a state value in the `MainMenu` Component
        // How do I get this information? I can't use the parameter `selectModule` as it is done here.
    }

    render() {
        return (
            <div>
                <MainMenu />
                <Button 
                    onClick={ this.doSomething.bind(this, selectedModule) }
                />
            </div>
        )
    }
}

在此组件中，为每个模块(modules 数组)生成一个菜单。通过单击一项，该模块将存储到 module 状态变量中。

class MainMenu extends Component {
    constructor(props) {
        super(props)
        this.state = { 
            module: 'initialValue'
        }
    }

    selectModule(module) {
        this.setState({ module })
    }

    render() {
        return (
            <Menu>
                <Menu.Item onClick={ this.selectModule.bind(this, 'targetValue') } >
                    { title }
                </Menu.Item>
            </Menu>
        )
    }
}

Answer 1

如果子组件将状态提升到父组件，而不是做一些魔术并检查内部状态。 child 变得无国籍。

class Main extends Component {
  state = {
    module: 'initialValue'
  }

  setActiveModule = (module) => {
    this.setState({ module })
  }

  render() {
    return (
      <MainMenu onChange={this.setActiveModule} />
    )
  }
}

class MainMenu extends Component {
  onClick = (module) => () => {
    this.props.onChange(module)
  }

  render() {
    return (
      <Menu>
        <Menu.Item onClick={this.onClick(title)} >
          {title}
        </Menu.Item>
      </Menu>
    )
  }
}