React 是不是允许动态渲染组件

Posted 2023-02-22

【中文标题】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 加载代码，你可以试试这个：***.com/questions/37337289/…

@crizcl 主要原因 - 数据来自 API。它有管理面板，所以数据可以改变。而且我不想要那个 API 中的 html。 html 和设计的东西应该在反应应用程序中。那么这有什么“好的做法”呢？

不不，我不明白这个 xD，所以你只想动态渲染图像？，如果你愿意，我可以帮你举一个更详细的例子，我不知道你是否明白与其他伙伴的 2 个答案一起提出想法，如果您解决了问题，请告诉我。

@crizcl 我已经解决了开关（超过 1 个）...但不是解决方案，与此处已经提供的相同。但我想，可以说，通过这样的方式动态加载组件：function loadComp（compName，otherParams）return 而不将银河系中的所有已知组件列出到某个魔术列表（数组或对象或还有什么）

【参考方案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];