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

而是在維護MainMenu組件中的state時，在父組件Main中維護，並在props傳遞模塊值，還將function傳遞給MainMenu以從子MainMenu更新父組件Main的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 3

與react共享狀態有時會有點困難。

反應哲學傾向於說我們必須從上到下管理狀態。 這個想法是要修改您父母的狀態，並將信息作為道具傳遞。 例如，讓我們想象以下情形：

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 。

這是使用react管理狀態共享的第一種方法，也是庫提供的默認方法

如果要管理更復雜的內容，共享更多狀態，則應查看助焊劑架構https://facebook.github.io/flux/docs/overview.html

以及最常見的flux實現： http : //redux.js.org/

Answer 4

將菜單狀態存儲在主要組件中，然后將狀態更新程序傳遞給菜單。

這對於進入自上而下的狀態非常有用https://facebook.github.io/react/docs/thinking-in-react.html