Javascript 如何根据从请求中获得的顺序动态地对react组件排序？

我想将我的组件顺序的责任转移到我从请求中获得的.JSON文件。在下面的组件中，我得到了两个组件的列表，它们的名称分别为

Component1

和

Component2

，它们的数据分别为

Component1\u数据

和

Component2\u数据

。我如何将我的组件按与此列表相同的顺序放置

此外，还有一个if-else语句将相关内容推送到适当的列表中。我怎样才能更有效地写这篇文章，从而消除重复

从“React”导入React；
从“../Component1”导入Component1；
从“../Component2”导入Component2；
常量着陆=（道具）=>{
常量组件1_数据=[]；
常量组件2_数据=[]；
如果（数据）{
for（设i=0；i

---

下面是一个更好的方法的基本概述：将数据映射到要渲染的组件中。然后可以直接在JSX中输出

import React from 'react';
import Component1 from '../component1';
import Component2 from '../component2';
// This is a mapping between the contentElement strings to the Component you want to render
const componentMap = {
  component1: Component1,
  component2: Component2,
};
const Landing = (props) => {
  const components = data.map((datum) => {
    const ComponentType = componentMap[datum.contentElement];
    if(!ComponentType) return null;
    // This returns the component you want with the data
    // If the props aren't set up how you want, you should be able to modify it to have the right names
    return (
      <ComponentType data={{ ...datum, content: props.data[datum.content] }} />
    );
  });

  return <div>{components}</div>;
};

export default Landing;

从“React”导入React；
从“../Component1”导入Component1；
从“../Component2”导入Component2；
//这是contentElement字符串与要呈现的组件之间的映射
常量组件映射={
组件1：组件1，
组件2：组件2，
};
常量着陆=（道具）=>{
常量组件=data.map（（基准）=>{
const ComponentType=componentMap[datum.contentElement]；
如果（！ComponentType）返回空值；
//这将返回所需的组件和数据
//如果道具没有按照你想要的方式设置，你应该能够修改它以获得正确的名称
返回(
);
});
返回{components}；
};
导出默认着陆；

最简单的方法是创建映射/注册表。它按键保存对要创建的组件的组件定义的引用。在您的例子中，您可以将其表示为

var register={“component1”：div}

，这将为您提供一个div组件定义。现在，如果您执行了

MyDiv=registry[“component1”]-您可以按如下方式使用：
-但它不必是div，它可以是组件。。我使用它来创建用户定义的仪表板SSO（在您的情况下）：
var register={“component1”：component1}
和
MyComponent1=registry[“component1”]然后：

import React from 'react';
import Component1 from '../component1';
import Component2 from '../component2';
// This is a mapping between the contentElement strings to the Component you want to render
const componentMap = {
  component1: Component1,
  component2: Component2,
};
const Landing = (props) => {
  const components = data.map((datum) => {
    const ComponentType = componentMap[datum.contentElement];
    if(!ComponentType) return null;
    // This returns the component you want with the data
    // If the props aren't set up how you want, you should be able to modify it to have the right names
    return (
      <ComponentType data={{ ...datum, content: props.data[datum.content] }} />
    );
  });

  return <div>{components}</div>;
};

export default Landing;