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

而不是做一些魔术和检查内部状态，如果孩子部件解除状态母公司相当有帮助。孩子变得无国籍。

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

Answer 2

将菜单状态存储在主要组件中，并将状态更新器传递到菜单。

这是进入自上而下的状态 https://facebook.github.io/react/docs/thinking-in-react.html

Answer 3

而是在保持MainMenu组件的state，维护父组件的主要，并在props传模块值，也传递给function MainMenu的更新父组件从孩子的MainMenu主要的state。

写这样的：

class Main extends Component { 

    constructor(props) { 
     super(props) 
     this.state = { 
      module: 'initialValue' 
     } 
     this.update = this.update.bind(this); 
    } 

    update(value){ 
     this.setState({ 
      module: value 
     }); 
    } 

    doSomething(){ 
     console.log(this.state.module); 
    } 

    render() { 
     return (
      <div> 
       <MainMenu module={this.state.module} update={this.update}/> 
       <Button 
        onClick={ this.doSomething.bind(this) } 
       /> 
      </div> 
     ) 
    } 
} 


class MainMenu extends Component { 

    selectModule(module) { 
     this.props.update(module); 
    } 

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

Answer 4

与共享状态的反应有时是有点硬。

反应哲学倾向于说我们必须从上到下管理状态。这个想法是修改父母的状态，并将这些信息作为道具传递。例如，让我们想象一下以下情形：

class Main extends React.Component { 
    contructor(props) { 
    super(props); 
    this.state = { currentMenuSelected: 'Home' }; 
    } 

    onPageChange(newPage) { 
    this.setState({ currentMenuSelected: newPage }); 
    } 

    render() { 
    return(
     <div> 
     <AnotherComponent currentMenu={this.state.currentMenuSelected} /> 
     <MenuWrapper onMenuPress={this.onPageChange} /> 
     </div> 
    ) 
    } 
} 

在我的例子中，我们告诉MenuWrapper改变页面时使用的Main.onPageChange。这样，我们现在可以使用道具将当前选择的菜单传递给AnotherComponent。

这是使用反应管理状态共享的第一方式，并通过库提供一个默认

如果你想管理更复杂的东西，分享更多的状态，你应该看看通量架构https://facebook.github.io/flux/docs/overview.html

和通量的最常见的实现：http://redux.js.org/