在jsx组件内添加变量

Question

我在申请中遇到下一种情况：在顶部，我导入了import {Flowersvg, Carsvg, Catsvg} from "../../images"我想像这样创建jsx：<${i}/>。

考虑到这个逻辑，我想在地图循环中渲染它：

arr.map(i => {
  return `<${i}/>`
})

arr包含许多值。由此，i每次都会渲染一个新的JSX。因此，我想在map()中创建一个新组件。在第一个渲染上可以是<Carsvg/>，第二个可以是<Flowersvg/>。为此，我要避免创建许多if。最后，我想得到下一个场景：根据arr中的列表项，我应该获得一个或另一个jsx组件。例如，如果arr中的值为carsvg，并且i也为carsvg，则我想渲染组件，依此类推。可以用jsx的相同方式渲染吗？

Answer 1

您可以使用此API并动态更改值

React.createElement(
  type,
  [props],
  [...children]
)

https://reactjs.org/docs/react-api.html#createelement