javascript - 在 return() 中使用 .map 导入组件

Question

谁能告诉我如何使用 .map 导入一堆组件？像这样的事情...

import Welcome from 'Welcome.jsx';
import Services from 'Services.jsx';

const Index = props => {
  const myComponents = ['Welcome', 'Services'];

  return (
    <div>
      {myComponents.map((componentName, index) => (
        <div key={index}> />
          <{componentName} />
        </div>
      ))}
    </div>
  );
};```

Answer 1

不要直呼他们的名字。在数组中使用组件(函数值)本身:

import Welcome from 'Welcome.jsx';
import Services from 'Services.jsx';

const Index = props => {
  const myComponents = [Welcome, Services];

  return (
    <div>
      {myComponents.map((AnyComponent, index) => (
        <div key={index}> />
          <AnyComponent />
        </div>
      ))}
    </div>
  );
};