Question

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

我已经为所有网页创建了一个顶级导航栏，但每个页面都需要填充＆＃34;导航栏具有不同的内容，我只希望渲染不同的内容，而不是一遍又一遍地重新渲染导航栏。

这是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都有shadow DOM，所以如果一个组件被重新渲染，它会在实际更新DOM之前做一个diff，所以它非常有效。

Answer 2

达到你想要的方式之一就是这样。

就像你说的那样你可以创建一个renderNav函数，但只有组件包含路由，你可以将该函数作为prop传递给你的子组件并运行它。

示例 （未经测试）

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'}]);
}

从子函数渲染组件

2 个答案: