reactjs - 如何创建带有变量的 React 组件？

Question

我有一个菜单。我希望菜单项打开具有相同样式和道具的不同组件。

所以我需要某事。在 JSX 中是这样的：

<VARIABLE_HERE style={...} otherProp={'otherProp'}>

VARIABLE_HERE我可以设置的变量在哪里（例如 FileView、SummaryView、...）。

标签： reactjs

Answer 1

import component1 from '/component1';
import component2 from '/component2';

const availableComponents = {
  component1,
  component2
};

const MyComponent = (props) => {
  const chosenOne = 'component1';
  const DisplayedComponent = availableComponents[chosenOne];
  return <DisplayedComponent {...props} />;
};

设置你choseOne的条件。