Reactjs 子组件更改父组件状态

这里有一个应用程序根组件，通过克隆将handleHeaderTitle函数传递给它的所有子级。 在子组件中，该函数在componentWillMount（）中调用 结果，根组件根据路由更新标题文本

根目录：

    {
         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和inside reducer这样的操作，并将它们结合起来。但是仍然要弄清楚如何通知容器根组件子组件更改了标题来直接回答您的问题，您不需要Redux来解决问题。当您必须维护大量状态时，或者当您的状态需要反映在应用程序中没有共同祖先的部分时，Redux可以帮助您。换句话说，当使用好的老式反应状态变得太麻烦时

React中解决特定问题的更常见方法是将布局包含在子组件中，而不是根组件中。这避免了试图让子对象控制父对象中的内容的问题。它有助于保持“单向数据流”，这正是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>
    )
  }
}

类页扩展React.Component{
render（）{
返回(
{this.props.headerTitle}
{this.props.children}
)
}
}
类MyFirstPage扩展了React.Component{
render（）{
返回(
我的内容在这里
)
}
}

谢谢Chardy，我正在使用边栏组件（），它不允许在子组件中定义标题。