将 div 传递给 props 没有孩子的反应答案

【问题标题】：pass div to props react without children将 div 传递给 props 没有孩子的反应
【发布时间】：2021-12-28 18:16:38
【问题描述】：

我正在尝试将 <div></div>（一些 html/jsx 内容）传递给 FC，但不是来自子道具（它已经用于其他用途）。

我想要这样的东西：

<Component props={{ 
  title: "hello",
  description: 
    {
      <>Hello <h1>world</h1> </>
    }
/>

我该怎么做？

【问题讨论】：

【解决方案1】：

更新：

如果您的版本高于 16.2，您可以使用Fragment：

像这样：

<Child
    text={
          <Fragment>
            This is an <strong>HTML</strong> string.
          </Fragment>
        }
      />

旧版本：

您可以使用dangerouslySetInnerHTML 从道具呈现 HTML 内容。

将 html 作为普通字符串 prop 传递

<Component text="This is <strong>not</strong> working." />

并像这样在 JSX 代码中渲染：

在此处输入代码：

<div className="header-title-right wow fadeInRight" dangerouslySetInnerHTML={{__html: props.text}} />

如果您正在渲染用户输入的数据，请小心。你可能成为 XSS 攻击的受害者

【讨论】：