javascript - 根据用户id渲染组件

Question

我的应用程序中有四个实体。每个实体都有自己的 Angular 色。如果用户的id为1，则页面应显示entity1组件，如果用户的id为2，则页面应显示entity2。我可以展示这一点，但无法按照我的方式传递 Prop 。

这是我所做的

const userTypes = [
  { id: '1', val: <Entity1 /> },
  { id: '2', val: <Entity2 /> },
  { id: '3', val: <Entity3 /> },
  { id: '4', val: <Entity4 /> }
];

const renderComponent = props => {
  const component = userTypes.filter(x => x.id === props.user.id);
  if (component) {
    return component[0].val;
  } else {
    return <div>can't get route. unknown issue.</div>;
  }
};

export default renderComponent;

这样我就无法传递 Prop

Answer 1

尝试:

if (component) {
  const Component = component[0].val;
  return <Component />;
} else {
  return <div>can't get route. unknown issue.</div>;
}