Question

如何为所有组件设置Header Fixed并且只应在body部分渲染组件而且标题标题还需要根据body部分中的组件渲染动态显示是通过路由器还是从redux

Answer 1

假设这是你的layout.jsx文件

render() {
  return(
    <div>
    <Header/>
    <YourRouterHandler>
    </div>
  ) 
}

对于标题 - 创建商店，并根据您当前呈现的页面进行更新。并在<Header/>

中获取其价值

Answer 2

这显示在React Router文档的第一个示例中。

您希望将所有路径包装在一个通常称为App的主容器路径中：

render((
  <Router history={browserHistory}>
    <Route path="/" component={App}>
      <Route path="about" component={About}/>
    </Route>
  </Router>
), document.getElementById('root'))

在App组件中，您可以使用this.props.children根据路线显示组件。

class App extends Component {
  render() {
    return (
      <div>
        <HeaderAlwaysShown />
        {this.props.children || <DefaultComponent />}
      </div>
    )
  }
}

如何设置标题已固定为所有组件只有组件应在主体节标题中呈现应与固定相同

2 个答案: