Изменения состояния в реакциях?

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; 

Таким образом, как видно из вышеизложенного я поставил баннер, LeftNavbar и RightNavBar компонентов в App .jsx, поэтому компоненты будут оставаться одинаковыми для детей.

Теперь я хочу изменить содержимое компонента баннера. Заголовок баннера, изображение баннера и заголовок баннера для каждой страницы.

Таким образом, у моих/статей/будет разное содержание баннеров и/статьи /: у пули будет разное содержание баннера.

В основном, как изменить содержимое компонента баннера для разных страниц?

Answer 1

Вы можете использовать функцию named componentsreact-router.

Например, вы измените 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> 
    ) 
} 
}