React 如何将数据传递给 parent 导航

Question

我有一个导航工具栏，里面有 H1。我还为每个页面设置了各种子内容，作为 child 组件。如何将标题信息从 child 页面组件传递到 parent 导航？

我试过使用 Context，但它只能从 Parent 传播到 Childs。

她是一个简化的例子：

const App = React.createClass({
  render() {
    return (
      <div>
        <toolbar>
          <h1>{myTitleAccordingToPage}</h1>
        </toolbar>
        <main>
          {this.props.children}
        </main>
      </div>
    )
  }
})

const A = React.createClass({
  render() {
    return (
      <div>
        Content for A page
      </div>
    )
  }
})

const B = React.createClass({
  render() {
    return (
      <div>
        Content for B page
      </div>
    )
  }
})

Answer 1

可能是时候使用 Flex https://facebook.github.io/flux/docs/dispatcher.html#content

可用于双向数据绑定的方法http://voidcanvas.com/react-tutorial-two-way-data-binding/

双向数据绑定的原始文档，但现在支持 mixin https://facebook.github.io/react/docs/two-way-binding-helpers.html （对于 mixin 可以使用 react-mixin npm 包）

编辑：评论中有意见认为："two-way data-binding is often a bad idea, and if your application makes more sense with two-way data binding then React should probably not be the framework to employ"。因此，您需要重新安排应用程序架构，尽可能避免使用双向数据绑定。请改用助焊剂。

Answer 2

将导航的状态提取到商店或其他地方，并通过道具将该状态传播到您的应用程序。

var page = {
  title: 'foo'
  otherData: ''
}

ReactDOM.render( <App page={ page }, element )

现在您的顶级组件知道状态并可以相应地向下过滤到其子级，例如，您可以更改 App 渲染函数以将应用程序状态的不同位向下传递给不同的子级即

（我在这里明确传递道具以显示正在发生的事情，并使用纯函数进行渲染，使用 class 和渲染方法，如果这对您来说更舒服，only ever passing props的好处是更容易让你的函数变得纯粹，优点很多）

const App = props => {
  <div>
    <Toolbar title={ props.page.title } />
    <Main otherData={ props.page.otherData />
  </div>
}

现在您已经创建了自上而下的数据流，使您的应用程序更具可预测性，并可能为使用纯渲染函数铺平道路，从而免费提升性能。自上而下数据流的关键实际上是让您的应用程序更具可预测性，这应该转化为可测试性，从而转化为可靠性，并使您的应用程序更容易被黑客攻击。

react-router 模块可以帮助创建这样的结构。采用该模块时有一个小的学习阶段，但像您正在创建的应用程序这样的应用程序的好处应该超过这一点，一旦学会后的开发速度可能远远超过您投入的任何学习支出。

React 如何将数据传递给 parent 导航

React how to pass data to parent navigation

heading

reactjs

react-router