Question

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

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以更新{{1}来自子MainMenu的父组件Main。

像这样写：

state

Answer 3

与反应共享状态有时有点困难。

反应哲学倾向于说我们必须从上到下管理状态。我们的想法是修改父级中的状态，并将信息作为props传递。例如，让我们想象以下场景：

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管理状态共享的第一种方法，以及库提供的默认值

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

和最常见的助焊器实现：http://redux.js.org/

Answer 4

将菜单状态存储在主组件中，并将状态更新程序向下传递到菜单。

这对于进入自上而下状态非常有帮助 https://facebook.github.io/react/docs/thinking-in-react.html

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

4 个答案: