如何在react中呈现来自道具的组件标记或自定义标记

Question

是否可以从道具生成组件标记本身？请帮助

组件为

<AvatarButtonIconB variant="light" iconname="Avatarcircleuser" />

在上面的组件中，我想生成一个组件标签"；Avatarcircleuser"；通过<｛props.iconname｝/>像

<Avatarcircleuser />

https://codesandbox.io/s/load-component-tag-name-from-props-t3cmtq

Answer 1

与其将组件名称作为字符串传递，不如传递组件本身。因此，在父组件中；化身"；组件：

import Avatarcircleuser from "./Avatarcircleuser ";

并将其传递给子组件：

<AvatarButtonIconB variant="light" icon={Avatarcircleuser} />

然后在AvatarButtonIconB中，您只需输出该道具：

<>{props.icon}</>

Answer 2

否。这是不可能的，因为组件需要具有指定的内容。我不确定您生成组件标记的目标是什么，因为当它被编译时，它将只是组件中的任何元素。

如果您希望一个组件与另一个组件的标识不同，只需添加一个关键道具即可。当使用数组为数组中的每个项创建组件时，这一点尤为重要。一个简单的方法是使用像随机密钥这样的随机id生成器包。