私は新しい少しは私が探しています何をしてもわからないので、反応するようだ

Question

子関数からコンポーネントをレンダリングするが、これは私が持っている問題です：私は、トップナビゲーションバーを作成しました

ことすべてのページのためにそこにいる必要がありますが、各ページは異なるコンテンツでNavbarを「塗りつぶす」必要があります。また、Navbarを何度も再レンダリングする代わりに、レンダリングする異なるコンテンツのみを必要とします。

これは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を更新する前にdiffを実行するので、かなり効率的です。

Answer 2

あなたが望むものを達成する方法の1つは、このようなものです。

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