是否可以从状态中获取组件的名称,或者我应该说基于状态加载组件,而不必执行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个组件(“平衡和设置”),但我还有更多组件以及一个在它们之间切换的功能。
答案 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" />}
</>);
我看到了下一个优点:
这只花了我们几个额外的代码字符(不是行!)。