如何根據狀態動態顯示組件

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 />。但是當我點擊Feed ListItem後，它不會用<HelpPage />替代<DialogPage />。但是我可以在Redux調試工具中看到它在HelpPage中調用componentWillMount。

如何根據狀態動態顯示組件？

謝謝！

編輯： 它工作，如果在我的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') 
);