Question

这里有app root组件通过克隆将handleHeaderTitle函数传递给它的所有子元素。在子组件内部，该函数在componentWillMount（）中调用因此，根组件会根据路由更新标题文本。

Root：

    {
         this.props.children &&
                    React.cloneElement(this.props.children, {
                      handleHeaderTitle: this.handleHeaderTitle
                    })
    }

    handleHeaderTitle(title) {
      this.setState({ headerTitle: title });
    }

子：

 componentWillMount() {
    this.props.handleHeaderTitle("Profile");
  }
  Profile.propTypes = { handleHeaderTitle: React.PropTypes.func };

这是用于添加redux的正确用法，因为状态在这里并不是真正的本地，因为它是从父组件的子组件设置的吗？

我想我需要创建像SET_PROFILE_HEADER和内部reducer这样的动作，将它们组合起来。但仍然要弄清楚如何通知容器根组件子组件已更改标题标题

Answer 1

要直接回答您的问题，您不需要Redux来解决您的问题。当你需要保持很多状态时，或当你的状态需要反映在没有亲密共同祖先的应用程序中时，Redux可以帮助你。换句话说，当使用好的老式React状态变得太麻烦时。

在React中解决特定问题的一种更常见的方法是将您的布局包含在子组件中而不是根目录中。这避免了尝试让孩子控制父级内容的问题。它有助于保护＆＃34;单向数据流＆＃34;这就是React的全部意义。

class Page extends React.Component {
  render() {
    return (
      <div>
        <div className='profile-header'>
          { this.props.headerTitle }
        </div>
        <div className='profile-content'>
          { this.props.children }
        </div>
      </div>      
    )
  }
}

class MyFirstPage extends React.Component {
  render() {
    return (
      <Page headerTitle='Header Title 1'>
          <div>My content here</div>
      </Page>
    )
  }
}

子组件更改父组件状态

1 个答案: