反应-从状态中获取组件的名称

时间:2019-02-09 19:09:10

标签: reactjs

是否可以从状态中获取组件的名称,或者我应该说基于状态加载组件,而不必执行if语句或case语句。

类似的东西:

<{this.state.page} />

这是我的代码更精确:

import Balance from './components/balance/Balance';
import Settings from './components/settings/Settings';

class App extends Component {  
state = {
    page:'Settings'
  };

render() {
    return (
      <React.Fragment>
       <{this.state.page} /> //Equivalent of <Settings />
      </React.Fragment>
    );
  }
}

在此示例中,我仅显示2个组件(“平衡和设置”),但我还有更多组件以及一个在它们之间切换的功能。

1 个答案:

答案 0 :(得分:1)

您不能通过其字符串名称初始化组件。

但是您可以映射string => constructor来实现

import Balance from './components/balance/Balance';
import Settings from './components/settings/Settings';


const map = {
    Settings: Settings, // can be just 'Settings,' as shortcut syntax
    Balance: Balance
}

state = {
    page: 'Settings'
};

render() {
    const Component = map[this.state.page];
    return <Component />;
}

在我看来,您正在开发自己的路由器服务。改用现有软件包是否有意义(react-router最著名)?

即使更喜欢使用自己的代码而不是公共软件包,分支有什么问题?

render() {
    const { page } = this.state;
    return (<>
        {page === 'Settings' && <Settings prop2="{this.props.onExit}" />}
        {page === 'Balance' && <Balance prop1="a" />}
    </>);

我看到了下一个优点:

  • 显式分支(可读性)
  • 我们可以在一个组件中传递任何道具,而其他组件则可以传递另一种道具(灵活性)
  • 我们可以使条件检查变得更加复杂(再次灵活)

这只花了我们几个额外的代码字符(不是行!)。