Question

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

我尝试使用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包）

编辑：评论中有一种观点认为：“双向数据绑定通常是一个坏主意，如果你的应用程序通过双向数据绑定更有意义，那么React可能不应该是使用的框架”。因此，您需要重新安排应用程序体系结构，以避免在可能的情况下使用双向数据绑定。改用助焊剂。

Answer 2

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

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

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

现在，您的顶级组件了解状态并可以相应地过滤到其子级，例如，您可能会更改App渲染函数以将应用程序状态的不同位传递给不同的子级，即< / p>

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

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

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

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

了解如何将数据传递到父导航

2 个答案: