React 是否允许动态渲染组件答案

【问题标题】：Does React allow render component dynamicallyReact 是否允许动态渲染组件
【发布时间】：2021-05-26 17:48:25
【问题描述】：

假设我有一个图标列表，当来自 api 的数据到来时应该在页面上显示这些图标。例如，它可以是 div 或 svg 其他 html 代码。例如，它是 img。

function Icon1() {
  return <img src="/link/to/image1.jpg" />
} 

function Icon2() {
  return <img src="/link/to/image2.jpg" />
} 

class IconLoader extends Component {
  render() {
    let image = 'Icon' + this.props.image;
    return <{image} />;
  }
}

我想要这样的东西：

function Some() {
  return <div><IconLoader image="1" /><IconLoader image="2" /></div>
}

我所有的尝试都失败了 React 产生错误：

The tag <Icon1> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter

或者只是打印标记名而不是渲染它...

根据图标的数量，像“将所有组件放入数组”这样的解决方案是不可接受的

【问题讨论】：

这不是一个好习惯，问题是为什么你需要这样做？如果你想从某个 api 加载代码，你可以试试这个：stackoverflow.com/questions/37337289/…
@crizcl 主要原因 - 数据来自 API。它有管理面板，所以数据可以改变。而且我不想要那个 API 中的 html。 html 和设计的东西应该在反应应用程序中。那么这有什么“好的做法”呢？
不不，我不明白这个 xD，所以你只想动态渲染图像？，如果你愿意，我可以帮你举一个更详细的例子，我不知道你是否明白与其他伙伴的 2 个答案一起提出想法，如果您解决了问题，请告诉我。
@crizcl 我已经解决了开关（超过 1 个）...但不是解决方案，与此处已经提供的相同。但我想，可以说，通过这样的方式动态加载组件：function loadComp（compName，otherParams）{return }而不将银河系中的所有已知组件列出到某个魔术列表（数组或对象或还有什么）

标签： reactjs

【解决方案1】：

这不会像这样工作，你可能有一个像这样的对象：

const components = {
  Icon1: Icon1,
  Icon2: Icon2
}

let image = 'Icon' + this.props.image;

const Component = components[image];

return <Component />

另一方面，您可以只使用一个组件，而不是为单独的图像使用 2 个组件：

<Image image={image} />

const Image = ({image}) => <img src={image === "1" ? "/link/to/image1.jpg" : "/link/to/image2.jpg" } />

【讨论】：

根据图标的数量，“将所有组件放入数组”这样的解决方案是不可接受的
请尝试第二种方法，否则请更正问题以指定更多详细信息。
例如可以有 20 或 40 个不同的项目。例如，它们是 svg 代码或一些 html。所以我想让它们在组件中直接使用。而且我也希望它被一些像问题描述的机制使用。
你可以用一个自定义函数来做到这一点，让我举个例子，当我有它的时候我会在这里回答你！

【解决方案2】：

我喜欢使用这种方法：

const Images = {
      "1": <img src="/link/to/image1.jpg" />,
      "2": <img src="/link/to/image2.jpg" />
    }

class IconLoader extends Component {
  render() {
    return Images[this.props.image];
  }
}

【讨论】：