Question

我有四个组成部分：Panel，PanelHeader，PanelBody，PanelFooter它们的组成如下：

<Panel>
    <PanelHeader>
        some title
    </PanelHeader>
    <PanelBody>
        <div>
            main content
        </div>
    </PanelBody>
    <PanelFooter>
        footer content
    </PanelFooter>
</Panel>

我也有多条路线，我希望看到Panel，但内容不同。

一个明显的解决方案是为每个路由创建组件，每个组件都有自己的Panel。

但在我的情况下，我想在路线之间添加一些变形动画（改变面板的高度，滑动体，淡化页脚等）。为实现此目的，我需要将所有内容呈现为完全相同的Panel，PanelHeader，PanelBody，PanelFooter实例，因此上述解决方案将无效。

所以我需要将路由组件拆分为每个PanelXXX的三个组件，问题是这些组件需要对彼此的事件做出反应。

到目前为止，有以下几点：

我无法创建另一个中介组件来控制这三个部分组件，因为在呈现之前我将无法访问它的API（因此我无法实现getter方法，例如getHeader（））。 / LI>
我可以将它们全部连接到redux，但它接缝太复杂了。
另一个解决方案是创建非React对象来共享状态，但在这种情况下我需要在此对象之后清理以克服内存泄漏。与redux的连接也很棘手。这种方法看起来不那么干净。
我也可以使用透明背景作弊，这样我就可以拥有一个Panel但是多个PanelHeader等等。但在这种情况下，我需要将有关动画的知识传播给所有子组件

有人知道在React中做任何其他方法吗？或者我应该从以上几点中选择一个？

Answer 1

听起来您可以使用this.props.children。

路由器

<Router history={createBrowserHistory()}>
    <Route path="/" component={App}>
        <IndexRoute component={DefaultView} />
        <Route path="foopath" component={FooView} />
        <Route path="barpath" component={BarView} />
    </Route>
</Router>

App.js

...

render: function() {
    return (
        <Panel>
            {this.props.children}
        </Panel>
    );
}

...

DefaultView.js

render: function() {
    <div>
        <PanelHeader>
            FooHeader
        </PanelHeader>
        <PanelBody>
            FooContent
        </PanelBody>
        <PanelFooter>
            FooFooter
        </PanelFooter>
    </div>
}

您可以详细了解React的儿童 here。

Answer 2

我认为您描述的场景和您提出的问题是使用Flux的确切合理化。 Redux是一种选择。我们使用原始的Facebook库使用普通的Flux Flux实现，我们取得了巨大的成功。它有一个陡峭的学习曲线，但是一旦你了解它，你面临的问题恰好适合基础设施。

有没有办法分享州之间的状态

2 个答案: