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/