React parent将数据发送给多个子节点

Question

我有一个具有上述结构的反应应用程序，其中父母有一个侧边栏并呈现两个孩子：内容和右边栏。

单击父级中的链接时，我需要更新内容和右侧栏目。

以下是代码的一部分：

ReactDOM.render(
    <Router history={hashHistory}>
        <Route path="/" component={App}>
            <IndexRedirect to="/select" />
            <Route path="/select" component={Select}>
                <Route path="foo" component={Foo} />
                <Route path="bar" component={Bar} />
                <Route path="baz" component={Baz} />
            </Route>
        </Route>
    </Router>
, destination );

在Select类中：

        <div className="sidebar">
                <Link to="select/foo">Foo</Link>
                <Link to="select/bar">Bar</Link>
                <Link to="select/baz">Baz</Link>
        </div>

        <div className="content">
            {this.props.children}
        </div>

        <div className="rightbar">
            // I want to render a component here, but this.props.children can only contain one children
        </div>

解决这个问题的任何解决方案，或者可能是更好的方法吗？

提前致谢。

Answer 1

使用React Router，您可以使用多个组件，如

<Route path="/foo" components={{content: FooContent, rightbar: RightBarComponent}}/>

宣读Multi Named Components