Javascript 如何在公共标头下嵌套组件

试图理解react router的基础知识，我对这些选择和选项有点不知所措。我有一个

react

+

redux

应用程序，它是根据

基本上，我所需要的是一个跨所有路由的通用

头
组件；从标题中，用户可以单击按钮更改主组件（每个视图提供不同的数据可视化）。该容器还应该链接到redux存储，并让公共数据向下流动到所选的主组件。我觉得这是一个非常普遍的需求，但我找不到一个可靠的示例/教程>\u
设置redux存储和反应路由器路由
常数路由=
;
ReactDOM.render(
{routes}
,
document.getElementById（'app'）
);


//App.jsx-->主容器组件
export const App=React.createClass({
render:function（）{
返回
{this.props.children}
;
}
});
函数MapStateTops（状态）{
返回状态；
}
export const AppContainer=connect（mapStateToProps，actionCreators）（应用程序）；

摘要
、
用户
和
设备
组件只是基于数据流向下填充的标准组件。目前，收到的错误是这些哑组件没有访问redux存储的权限。但是，如果我将它们直接链接到存储，它们将在不使用
标题的情况下渲染

编辑：从以下位置删除对不推荐的
的引用：

RouteHandler走了。路由器现在自动填充
此.props.children是基于活动管线的组件

试一试

export const App=React.createClass({
render:function（）{
返回
{this.props.children}
;
}
});

您还应该修复路由，以便
AppContainer
实际包含其余组件（以及
重定向
）：

const路由=
;
如果要访问redux存储，则必须先渲染它。要做到这一点，您必须手动或仅使用库。
此外，最好将
提供者
置于比路由器更高的级别

因此，您的初始代码如下所示：

ReactDOM.render(
 <Provider store={store}>
   {router}
 </Provider>,
 domRef
);

ReactDOM.render(
{路由器}
,
多姆雷夫
);

之后，您的所有组件都将有权存储在
上下文中
。为了避免一切混乱，只需使用“react-redux”
中的
{connect}，将组件包装在其中并选择所需的属性。
感谢您的回复。不幸的是，主要组件（如
Summary
）仍然返回错误，表明它们无法访问redux存储。有什么想法吗？您必须将每个组件分别连接到存储中，以便他们使用它，无论是否是儿童。因此，我已将
摘要
组件链接到存储中，它会呈现（woot），但
标题
不会。。。似乎
Summary
组件是独立呈现的，而不考虑
App
容器外壳？当然，我可以只在每个组件中包含
Header
，但我的问题的重点是如何不跨不同路径重新呈现公共组件。除了主类之外，您不需要在任何地方包含
Header
。您如何知道
标题
未渲染？您是否在其
render
方法中使用了
console.log
？是的，否
console.log
正在显示，并且页面上没有
标题
组件。同样，我认为我可以在每个主要组件的顶部添加
标题
，
摘要
用户
和
设备
，但我认为有一种方法可以避免在每个视图中重复相同的组件。
// App.jsx --> the main container component

export const App = React.createClass({
  render: function() {
    return <div>
      <Header {...this.props} />
      {this.props.children}
    </div>;
  }
});

function mapStateToProps(state) {
  return state;
}

export const AppContainer = connect(mapStateToProps, actionCreators)(App);

ReactDOM.render(
 <Provider store={store}>
   {router}
 </Provider>,
 domRef
);