如何将 JSX 映射逻辑与包含带有 props 的组件的映射数组分开？

Question

我有一个组件映射了一个组件数组，这些组件将 props 传递给了它们，大致如下：

const Component = (prop0, prop1, prop2) => {

  const array = [
    {
      id: 0,
      component: <SubComponent0 prop0={prop0}>
    },
    {
      id: 1,
      component: <SubComponent1 prop1={prop1}>
    },
    {
      id: 2,
      component: <SubComponent2 prop2={prop2}>
    }
  ];

  return (
    {array.map(obj => 
      <div key={obj.id}>
        {obj.component}
      </div>
    )}
  );
};

export default Components;

我想将数组分离到我导入的自己的 JS 文件中，这在组件不涉及道具的其他情况下对我来说效果很好，但在这种情况下我运行遇到了问题在这个功能组件的范围之外未定义的道具，我无法弄清楚如何将这些道具 import/pass 放入我放置数组的新 JS 文件中。这是可能的，还是有另一种方法可以将数组移动到单独的文件中？谢谢

Answer 1

一种方法是使用默认函数构建数据，然后 returns 一切。

data.js

const getData = (prop0, prop1, prop2) => {
  return [
  {
    id: 0,
    component: <SubComponent0 prop0={prop0}>
  },
  {
    id: 1,
    component: <SubComponent1 prop1={prop1}>
  },
  {
    id: 2,
    component: <SubComponent2 prop2={prop2}>
  }
];
}

module.exports = getData;

App.js

const getData = require('data.js');
const Component = (prop0, prop1, prop2) => {

  const array = getData(prop0, prop1, prop2);

};

Answer 2

我想你也可以尝试动态组件意味着来自字符串的组件名称我从未实现但我搜索很少并准备如下解决方案。你可以尝试让我们知道它是否有效

data.js

import { lazy } from 'react';
const getData = (props) =>{

const array = props.map((item,index) => {
    const DynamicComponent = lazy(() => import(`./SubComponent${index}`));
    return {
        id : index,
        component : <DynamicComponent prop=`prop${item}` />
    }
});

return array
}
export default getData;

App.js

import getData from './data.js';

const Component = (...props) => {

const array = getData(props)

return (
{array.map(obj => 
  <div key={obj.id}>
    {obj.component}
  </div>
)}
);
};

export default Component;

如何将 JSX 映射逻辑与包含带有 props 的组件的映射数组分开？

How can I separate the JSX mapping logic from the mapped array containing components with props?

javascript

components

reactjs

array.prototype.map

react-props

data.js

App.js