如何在React中将道具传给兄弟姐妹？

Question

我designed a pretty simple responsive layout（请务必打开与Chrome的链接），现在我尝试在React中实现它。我也附上了一些布局截图。

这个应用程序应该是典型的选项卡/导航应用程序，但由于响应式布局，在React中使用视图层次结构非常尴尬。

我已经构建了一个名为Layout的React组件来抽象出所有布局内容。布局还包含renderLeft，renderRight，title和onTab的道具。然后将布局的子项渲染到内容块中。

简单的解决方案是使Layout成为当前视图的子项并呈现您想要的任何内容。但是，这会弄乱我想到的一些动画。我希望在标签栏，标题和左右按钮周围有一个CSSTransitionGroup元素，以便在它们发生变化时为它们设置动画。因此， Layout元素必须在视图之间保持相同，否则将为每个视图呈现新的CSSTransitionGroup元素，这不是很好。

所以现在问题是我有一个Layout组件，其视图呈现为其子组件（但与App组件相似），但视图需要指定{ {1}}，renderLeft和renderRight作为其父级的布局！例如，在顶级title组件中，渲染函数可能如下所示，我需要一些从App设置布局renderLeft的方法。 / p>

View

到目前为止，我唯一想到的似乎完全是错误的做法：

在顶级render() { return ( <Layout renderLeft={??}> <View setRenderLeft={??}/> <Layout/> ) } 组件中，拥有App，renderLeft和renderRight及title的状态变量，将这些变量传递给App 1}}道具。现在，对于视图，传递一些函数，例如Layout，setRenderLeft和setRenderRight，它们将更改setTitle状态，从而更改App。因此，我们可以在Layout中为每个视图调用这些函数。

这似乎完全是黑客攻击，似乎打破了单向数据流的整体思路。但是，我不知道怎么做！有没有更合适的方法呢？我在构建iOS应用程序时提醒了委托的概念，但那非常OOP而不是FP。

有什么想法吗？

Answer 1

你的问题有点难以准确说明问题是什么，但如果我是你，我会在https://facebook.github.io/react/tips/communicate-between-components.html上阅读

  

用于两个没有组件的组件之间的通信   亲子关系，您可以设置自己的全局事件   系统。订阅componentDidMount（）中的事件，取消订阅   componentWillUnmount（），并在收到事件时调用setState（）。   Flux模式是安排这种方式的可能方式之一。

您希望兄弟姐妹与父母交谈，并在那里或在全球范围内进行交流。

希望这有帮助。