Question

我有以下布局： -

所以基本上顶部有一个横幅，横幅包含图像，标题和副标题。

横幅旁边有左侧的类别栏，右侧是中间和右侧导航栏。

以下是我目前的路线： -

ReactDOM.render((
     <Router history={browserHistory}>
      <Route path="/" component={app}>
       <IndexRoute component={home}/>
       <Route path="/articles" component={articles} />
       <Route path="/articles/topics/:featureName" component={articleFeatures} />
       <Route path="/articles/:slug" component={articleContent}/>
       <Route path="interviews" component={interviews}>
          <Route path="interviews/:slug" component={interviewContent} />
       </Route>
       <Route path="collections" component={collections}>
          <Route path="collections/:slug" component={collection} />
       </Route>
  </Route>
  </Router>
), document.getElementById('app'));

以下是我的app.js： -

class App extends React.Component{
   render(){
     return(
       <div className="insights">
          <Banner />
          <div className="content-container">
            <LeftNavBar/>
            <div className ="feeds">{this.props.children}</div>
            <RightNavbar/>
          </div>
      </div>
   )
 }
}

export default App;

因此，从上面看，我已经在App.jsx中放置了Banner，LeftNavbar和RightNavBar组件，因此组件对于儿童来说将保持相同。

现在我想更改横幅组件的内容，即每页的横幅标题，横幅图片和横幅子标题。

所以我的/ articles /会有不同的横幅内容和/ articles /：slug会有不同的横幅内容。

那么基本上如何更改不同页面的横幅组件的内容？

Answer 1

您可以使用react-router的{{3}}功能。

例如，您将component道具更改为components，然后设置包含指定组件的对象：

import BannerA from './BannerA';
import BannerB from './BannerB';

ReactDOM.render((
     <Router history={browserHistory}>
      <Route path="/" component={app}>
       <IndexRoute components={{ main: home, banner: BannerA }}/>
       <Route path="/articles" components={{ main: articles, banner: BannerB } } />
       <Route path="/articles/topics/:featureName" components={{ main: articleFeatures, banner: BannerA }} />
       <Route path="/articles/:slug" components={{ main: articleContent, banner: BannerA }}/>
       <Route path="interviews" component={interviews}>
          <Route path="interviews/:slug" component={interviewContent} />
       </Route>
       <Route path="collections" component={collections}>
          <Route path="collections/:slug" component={collection} />
       </Route>
  </Route>
  </Router>
), document.getElementById('app'));

您会注意到我特意没有为您的所有路线添加此更改，说明您仍然可以混合搭配。

然后将您的应用更改为以下内容。我设置了一个默认横幅，以防路由器没有提供一个，如果没有提供main组件，我们会回到旧的this.props.children方法。

 import DefaultBanner from './DefaultBanner';  

 class App extends React.Component{
   render(){
     return(
       <div className="insights">
          {this.props.banner || <DefaultBanner /> }
          <div className="content-container">
            <LeftNavBar/>
            <div className ="feeds">
              {this.props.main || this.props.children}
            </div>
            <RightNavbar/>
          </div>
      </div>
   )
 }
}

reactjs中的状态变化？

1 个答案: