我可以将 HTML 标记作为道具传递吗 - React

Question

我想做这样的事情。

在父组件中

<child tag={h1}/>

在子组件中

<this.props.tag />

当我传递 html 组件（标签）之一时抛出“未解析的变量或类型 div”问题，例如（div、h1、ext.）

Answer 1

更新：

是的，我们可以将 HTML 标记作为道具传递。根据您的需要，有几种方法。

1. 将标签作为道具传递

<ChildComponent tag="h1" />

在子组件内部，我们可以使用如下标签。

const Child = ({ tag: Tag}) => (
    <Tag>Hello World</Tag>
)

1. 通过设置dangerouslySetInnerHTML

<Child tags="<h1>Hello world</h1>" />

子组件内部：

const Child = props => <div dangerouslySetInnerHTML={{ __html: props.tags.outerHTML }}/>

Here 是您应该了解的危险SetInnerHTML。简而言之，这暴露了 XSS 攻击。

这个与作为道具传递无关。但你可能要考虑

如果您正在执行与 SEO 相关的任务（可能是 nextjs）并且您需要渲染条件标签（有时是 h2，有时是 h3）。然后你就可以按照以下方式进行操作了！

1. 条件语句

// Parent
const Parent = () => <Child isH3Tag />

// Child
const Child = ({ isH3Tag = false, children }) => isH3Tag ? <h3>{children}</h3> : <h2>{children}</h2>;

这是一个演示。 https://codesandbox.io/s/8x65l707yj

Answer 2

JSX 表达式必须以大写字母开头，例如<Elment />

在您的情况下，当您想传递标签名称时，请使用 createElement:

<div>
  {React.createElement(this.props.tag, {children: <content>, prop1: <v1>, ...})}
<div>

另一种选择是使用recompose#componentFromProp

Answer 3

您可以像这样从父组件传递tag 作为子组件：
在父组件中：

<Child> <h1></h1> </Child>

在子组件中你可以像这样访问：

使成为（） { 返回 （ {this.props.children} ) }