从子功能渲染组件

Question

我对React有点新手，所以我什至不确定我在寻找什么，但这是我的问题：

我已经创建了一个顶部导航栏，所有页面都必须存在，但是每个页面都需要用不同的内容“填充”导航栏，我只希望呈现不同的内容，而不是在和上方重新渲染导航栏。再次。

这是app.jsx中的导航条代码：

<Router>
    <div className="wrapper">

      {/* Sidebar */}
      <RbzNavbar />

      <div id="content">
        {/* Top navbar */}
        <nav className="navbar navbar-default">
          <div className="container-fluid">

            <div className="navbar-header">
              <button type="button" id="sidebarCollapse" className="btn btn-default navbar-btn">
                <i className="glyphicon glyphicon-align-justify"></i>
              </button>
            </div>

            {/* some function to render the top navbar content for eact page */}

          </div>
        </nav>

        {/* Pages routes and components */}
        <Route exact path='/' component={RbzDashboard} />
        <Route exact path='/application-tree' component={RbzApplicationTree} />
        <Route exact path='/planet' component={RbzStaticRules} />
      </div>
    </div>
  </Router>

我想创建一些类似{this.renderNavbar}的函数，该函数将在路由器中的每个页面上实现。

Answer 1

每个组件仅在状态更改时才重新渲染。 因此，您无需担心重复渲染，而且React在任何情况下都具有阴影DOM，因此，如果重新渲染组件，则在实际更新DOM之前会进行比较，因此它非常有效。

Answer 2

实现您想要的一种方式是这样的。

就像您说的那样，您可以创建一个renderNav函数，但仅针对包含路由的组件，您可以将该函数作为道具传递给子组件并运行它。

示例 （未经测试）

setNavData = (navData) => {
  // this will change the state and navigation will be re-rendered
  this.setState({navData});
}

renderNav = () => {
  // render nav according to state
  return this.state.navData.map((navItem) => <a href="#">{navItem.name}</a>);
}

//Then you can pass setNavBar as a prop to Child

render() {
  return(
    <Router>
    <div className="wrapper">

      {/* Sidebar */}
      <RbzNavbar />

      <div id="content">
        {/* Top navbar */}
        <nav className="navbar navbar-default">
          <div className="container-fluid">

            <div className="navbar-header">
              <button type="button" id="sidebarCollapse" className="btn btn-default navbar-btn">
                <i className="glyphicon glyphicon-align-justify"></i>
              </button>
            </div>

            {this.renderNav}

          </div>
        </nav>

        {/* Pages routes and components */}
        <Route exact path='/' render={() => <RbzDashboard changeNavStructure={this.setNavData} />} />
        <Route exact path='/application-tree' render={() => <RbzApplicationTree changeNavStructure={this.setNavData} />} />
        <Route exact path='/planet' render={() => <RbzStaticRules changeNavStructure={this.setNavData} />} />
      </div>
    </div>
  </Router>
  )
} 

// lastly in your child component

componentWillMount() {
  this.props.changeNavStructure([{name: 'Home'}, {name: 'Contact'}, {name: 'PRofile'}]);
}