来自mobx商店的字符串用作反应组件名称？

Question

使用地图感觉有点重复。

有什么方法使用从mobx传下来的字符串渲染反应组件？因为当我有20种不同的动态组件时，它很快变得混乱和重复。

目前我正在使用：

function ParentComponent(){
  const compNames = {
      component1: <component1/>,
      component2: <component2/>,
  }
  const component = compNames[store.name];
  return( 
        <div>
            <MyComponentName type={type}/>
        </div>
   )
}

可能更短吗？例如

function ParentComponent(){
  const {name: MyComponentName, type } = store
  return(
    <div>
        <MyComponentName type={type}/>
    </div>
  )
}

然后将Parent组件导入索引页面。

Answer 1

// MobX store
import UserList from "./UserList";
import UserView from "./UserView";

@observable
component = {
    "user-list": UserList,
    "user-view": UserView
};


// observer component
@observer function UserComponent({type}) {
    const Component = store.component[type];

    return <Component />;
}


// display the component
<UserComponent type="user-list" />