Javascript 从React中的循环渲染复杂组件

使用

map

从循环渲染组件非常容易

从“/Card”导入卡片；
常量水果=（）=>{
常量水果列表=[“苹果”、“香蕉”、“橘子”]；
返回水果列表.map（水果=>）
}

当我想要呈现一组复杂的、不相关的组件时，我该怎么做？这些组件不能被简化为一个通用组件？下面是一个例子

import Birth from './BirthComponent';
import School from './SchoolComponent';
import Job from './JobComponent';
import Marriage from './MarriageComponent';

const LifeComponent = () => {
  const meaningOfLife = 42; 
  return (
     // How do I use a loop to render these components?
     <React.Fragment>
      <Birth life={meaningOfLife} />
      <School life={meaningOfLife} />
      <Job life={meaningOfLife} />
      <Marriage life={meaningOfLife} />
     </React.Fragment>
  )
}

从“/BirthComponent”导入出生；
从“./SchoolComponent”导入学校；
从“./JobComponent”导入作业；
从“/MarriageComponent”导入婚姻；
常量生命组件=（）=>{
const meaningOfLife=42；
返回(
//如何使用循环渲染这些组件？
)
}

在上面的示例中，所有四个组件都是不相关的，并且结构不同，因此我无法创建第一个示例中的通用组件

---

我可以做一些类似于

constmylife=[，]

的事情吗。但是，我如何向他们传递道具呢？

只要您只返回一个JSX元素，您就可以呈现任何您想要的组件集合。假设您可以将它们彼此相邻地渲染，这将起作用：

import Birth from './BirthComponent';
import School from './SchoolComponent';
import Job from './JobComponent';
import Marriage from './MarriageComponent';

const LifeComponent = () => {
  return (
     // How do I use a loop to render these components?
     <div>
       <Birth />
       <School />
       <Job />
       <Marriage />
     </div>
  )
}

从“/BirthComponent”导入出生；
从“./SchoolComponent”导入学校；
从“./JobComponent”导入作业；
从“/MarriageComponent”导入婚姻；
常量生命组件=（）=>{
返回(
//如何使用循环渲染这些组件？
)
}

编辑2:如果要渲染实际的组件数组，我建议创建一个更高阶的组件来完成这项工作，它接受组件数组作为参数并映射到它们。我举了一个小例子

---

您还可以创建一个片段或组件，为您呈现所有这些片段或组件。问题是，您仍然需要将组件键入父组件或数组中，然后将其导入，但这将节省一些添加道具的工作，前提是道具都是相同的。

如果您有组件

App

，

App2

，

App3

，并且希望呈现

App2

，则，

App3

在

App

中，您可以执行以下操作

function App(props) {
  const components = [App2,App3];
   const content = components.map((c,k)=>{

           const Newcomponent = c;
           return <Newcomponent key={k} msg="x"/>;

   })

  return (
    <div className="App">
      {content}

    </div>
  );
}

功能应用程序（道具）{
常量组件=[App2，App3]；
const content=components.map（（c，k）=>{
const Newcomponent=c；
返回；
})
返回(
{content}
);
}

---

codesandbox中的完整代码

我喜欢你的命名约定。但我仍然不明白为什么你会希望这是动态的。道具是不同的还是完全相同的？我希望使用循环来渲染它们，而不是一个接一个地键入它们。每个组件的道具都是一样的。我想他想要这样的东西：

comps=[出生、学校、工作、婚姻]

对于comps中的每个comp:render comp

，这很有意义，标题是循环，但他没有发布循环，甚至没有可以迭代的数据，所以我只是让它运行，但同样的原则也适用。@RutherfordWonkington，我不想多次将他们呈现为一个“群体”。我想马上把它们渲染出来。问题是，如果除了出生、学校、工作和婚姻，还有1000多个因素，那该怎么办呢？啊，我不清楚。我用一个例子更新了我的答案，说明了如何使用高阶组件实现这一点。