Reactjs 如何直观地显示反应组件

我在一个React项目中工作，我需要根据布局渲染一些组件

--asumme您有一个数组，告诉您需要渲染的组件：

Layout1 = ['Events', 'Photo', 'News']

--以及一个函数，该函数根据模块的不同，使用一些数据呈现特定组件：

layout1.forEach(function(layout) {
  someFuncions(layout, somedata);
});

someFunction = (layout, data) => {
  layout.forEach( function(Comp) {
    if(Comp == 'Events') {
      return (<Events module-data={data} />)
    } else if(Comp == 'Photo') {
      return (<Photo module-data={data} />)
    } else if(Comp == 'News') {
      return (<News module-data={data} />)
    }
  });
}

layout1.forEach（函数（布局）{
一些功能（布局、一些数据）；
});
someFunction=（布局、数据）=>{
forEach布局（功能（组件）{
如果（Comp==‘事件’）{
返回（）
}否则，如果（组件==‘照片’）{
返回（）
}否则如果（Comp==‘News’）{
返回（）
}
});
}

--由于可能有许多组件，我想找到一种方法来避免使用“if”函数来确定应该渲染哪个组件

---

我怎样才能做到这一点？非常感谢各位

你们可以使用一个类似syntex的

开关

但可能会更干净一点

switch(comp) {
    case 'Events':
        return (<Events module-data={data} />)
    case 'Photo':
        return (<Photo module-data={data} />)
    case 'News':
        return (<News module-data={data} />) 
}

开关（comp）{
“事件”案例：
返回（）
案件‘照片’：
返回（）
案件‘新闻’：
返回（）
}

您可以使用一个

开关

类似的syntex，但可能会稍微干净一点

switch(comp) {
    case 'Events':
        return (<Events module-data={data} />)
    case 'Photo':
        return (<Photo module-data={data} />)
    case 'News':
        return (<News module-data={data} />) 
}

开关（comp）{
“事件”案例：
返回（）
案件‘照片’：
返回（）
案件‘新闻’：
返回（）
}

您可以直接在阵列中传递组件

import Events from 'path/to/Events'
import Photo from 'path/to/Photo'
import News from 'path/to/News'

Layout1 = [Events, Photo, News]

然后无论你在哪里调用函数

从您最初的问题来看，您问题中的布局1似乎是一个类似布局1的数组

layout1.forEach(function(layout) {
  someFuncions(layout, somedata);
});

someFunction = (layout, data) => {

  // returning from forEach won't result in anything. you probably want to map
  layout.forEach( function(Component) {
    return (<Component module-data={data} />)
  })
}

layout1.forEach（函数（布局）{
一些功能（布局、一些数据）；
});
someFunction=（布局、数据）=>{
//从forEach返回不会产生任何结果。您可能希望映射
布局.forEach（功能（组件）{
返回（）
})
}

您可以直接在阵列中传递组件

import Events from 'path/to/Events'
import Photo from 'path/to/Photo'
import News from 'path/to/News'

Layout1 = [Events, Photo, News]

然后无论你在哪里调用函数

从您最初的问题来看，您问题中的布局1似乎是一个类似布局1的数组

layout1.forEach(function(layout) {
  someFuncions(layout, somedata);
});

someFunction = (layout, data) => {

  // returning from forEach won't result in anything. you probably want to map
  layout.forEach( function(Component) {
    return (<Component module-data={data} />)
  })
}

layout1.forEach（函数（布局）{
一些功能（布局、一些数据）；
});
someFunction=（布局、数据）=>{
//从forEach返回不会产生任何结果。您可能希望映射
布局.forEach（功能（组件）{
返回（）
})
}

使用将布局映射到所需组件的javascript对象怎么样？这样，很明显，您打算根据布局渲染不同的组件

请参见以下示例：

constsomefunction=（布局、数据）=>{
常量组件映射={
“事件”：，
“照片”：，
“新闻”：
}
返回组件图[布局]；
}

使用将布局映射到所需组件的javascript对象怎么样？这样，很明显，您打算根据布局渲染不同的组件

请参见以下示例：

constsomefunction=（布局、数据）=>{
常量组件映射={
“事件”：，
“照片”：，
“新闻”：
}
返回组件图[布局]；
}

我会为组件创建一个映射，然后在渲染时进行查找

const components = {
    Events, // Shorthand for 'Events': Events
    Photo,
    News
};

const layout = ['Events', 'Photo'];

const someFunction = (layout, data) =>
    layout.map((name) => {
        const Component = components[name];
        return <Component module-data={data} />;
    });

const组件={
事件，//事件的简写形式：事件
照片，
新闻
};
常量布局=['Events'，'Photo']；
const someFunction=（布局、数据）=>
布局图（（名称）=>{
常量组件=组件[名称]；
返回；
});

我会为组件创建一个映射，然后在渲染时进行查找

const components = {
    Events, // Shorthand for 'Events': Events
    Photo,
    News
};

const layout = ['Events', 'Photo'];

const someFunction = (layout, data) =>
    layout.map((name) => {
        const Component = components[name];
        return <Component module-data={data} />;
    });

const组件={
事件，//事件的简写形式：事件
照片，
新闻
};
常量布局=['Events'，'Photo']；
const someFunction=（布局、数据）=>
布局图（（名称）=>{
常量组件=组件[名称]；
返回；
});

谢谢，我已经测试过了，这是最好的方法。工作完美谢谢你，我测试过，这是最好的方法。完美地工作