reactjsの状態変化？

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にバナー、LeftNavbarとRightNavBar部品を入れています.jsxなので、コンポーネントは子供のために同じままです。

ここでは、各ページのバナーコンポーネント、つまりバナータイトル、バナーイメージ、バナーサブタイトルの内容を変更したいと考えています。

私の/記事/は異なるバナーコンテンツと/記事を持ちます。/：スラッグは異なるバナーコンテンツを持っています。

基本的にどのように異なるページのバナーコンポーネントの内容を変更するのですか？

Answer 1

named componentsの機能はreact-routerです。例えば

あなたはcomponentsにcomponent小道具を変更し、名前のコンポーネントを含むオブジェクトを設定します。

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

あなたは、私が特にあなたができることを示す、すべてのルートにこの変更を追加していないわかりますまだ混じってマッチします。

あなたのアプリケーションを以下のように変更してください。私はルータが1つを提供しない場合にデフォルトのバナーを設定しました。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> 
    ) 
} 
}