状態に基づいてコンポーネントを動的に表示する方法

Question

サイドバーがある場所にダッシュボードを作成し、そのサイドバーが状態を変更します。ここで

は、私はそれを行う方法である

私のshowPage：

showPage(page) { 
    switch (page) { 
     case 'feeds': 
     return <HelpPage />; 
     case 'messages': 
     return <MessagesPage />; 
     case 'projects': 
     return <ProjectsPage />; 
     case 'support': 
     return <SupportPage />; 
     case 'about': 
     return <AboutPage />; 
     default: 
     return <DialogPage />; 
    } 
    } 

レンダリング私の方法：私はページを切り替える方法

：

私は要素を呼び出す方法

handleClick(page) { 
this.props.pageSwitcher(page); 
} 
... 
<ListItem 
    primaryText="Feeds" 
    onClick={() => this.handleClick("feeds")} /> 

：

<Col xs={6} sm={6} md={6} lg={8}> 
{ 
    this.showPage(page) 
} 
</Col> 

私のアクション：非常に開始時に

export function pageSwitcher(page = '') { 
    let payload = {}; 
    switch (page) { 
    case 'feeds': 
     payload = { 
     type: types.SHOW_HELPS_FEED, 
     page, 
     }; 
     break; 
    case 'messages': 
     payload = { 
     type: types.SHOW_INBOX, 
     page, 
     }; 
     break; 
    case 'projects': 
     payload = { 
     types: types.SHOW_PROJECTS, 
     page, 
     }; 
     break; 
    case 'support': 
     payload = { 
     types: types.SHOW_SUPPORT, 
     page, 
     }; 
     break; 
    case 'about': 
     payload = { 
     types: types.SHOW_ABOUT, 
     page, 
     }; 
     break; 
    default: 
     payload = { 
     types: '', 
     page, 
     }; 
    } 
    return payload; 
} 

、それはデフォルトのコンポーネント<DialogPage />をロードします。しかし、フィードListItemをクリックすると、<DialogPage />は<HelpPage />に置き換えられません。しかし、私はHelpPageのcomponentWillMountと呼ばれるReduxデバッグツールで見ることができます。

どのように状態に基づいてコンポーネントを動的に表示できますか？

ありがとうございます！

EDIT： 私のshowPageはコンポーネントを返すだけですが、コンテナを返すと何も表示されません。これは、アクションを呼び出すcomponentWillMountがあり、ダッシュボードの以前の状態が置き換えられているためです。

import * as types from '../actions/actionTypes'; 

export default function helpsReducer(state = { 
    isFetching: false, 
    items: [], 
}, action) { 
    switch (action.type) { 
    case types.HELPS_FEED_REQUEST: 
     return Object.assign({}, state, { 
     isFetching: true, 
     }); 
    case types.HELPS_FEED_SUCCESS: 
     return Object.assign({}, state, { 
     isFetching: false, 
     items: [ 
      ...state.items, 
      ...action.items, 
     ], 
     }); 
    default: 
     return state; 
    } 
} 

Answer 1

私が作成したあなたの質問をもとに、簡単な例： は、ここで私はロードしたい私のコンテナの減速です。

https://jsfiddle.net/69z2wepo/48038/

var Child = React.createClass({ 
    renderPage: function (page) { 
     if (page === 'one') { 
      return <div>one</div>; 
     } 

     return <div>two</div>; 
    }, 
    handleClick: function (page) { 
     this.props.switchPage(page); 
    }, 
    render: function() { 
     return (
      <div> 
       <ul> 
        <li 
         style={{cursor: 'pointer', textDecoration: 'underline'}} 
         onClick={() => this.handleClick('one')} 
        > 
         one 
        </li> 
        <li 
         style={{cursor: 'pointer', textDecoration: 'underline'}} 
         onClick={() => this.handleClick('two')} 
        > 
         two 
        </li> 
        {this.renderPage(this.props.page)} 
       </ul> 
      </div> 
     ); 
    } 
}); 

var Parent = React.createClass({ 
    getInitialState: function() { 
     return {page: 'one'}; 
    }, 
    switchPage: function (page) { 
     this.setState({page: page}); 
    }, 
    render: function() { 
     return (
      <div> 
       <Child page={this.state.page} switchPage={this.switchPage}/> 
      </div> 
     ); 
    } 
}); 

ReactDOM.render(
    <Parent />, 
    document.getElementById('container') 
);