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 [{1}}后，它不会将ListItem替换为<DialogPage />。但是我可以在Redux调试工具中看到它在<HelpPage />中调用componentWillMount。

如何根据状态动态显示组件？

谢谢！

编辑：如果在我的HelpPage中只返回一个Component，但是如果我返回一个Container，它就不会显示任何内容。这是因为我有showPage调用一个动作，并且正在替换仪表板的先前状态。这是我要加载的容器的reducer：

componentWillMount

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

如何根据状态

1 个答案: