【问题标题】: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> </>
    }
/>

我该怎么做?

【问题讨论】:

  • 你不能渲染它。你需要使用dangerouslySetHTML来渲染它

标签: javascript html reactjs typescript


【解决方案1】:

更新

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

像这样:

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

旧版本:

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

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

&lt;Component text="This is &lt;strong&gt;not&lt;/strong&gt; working." /&gt;

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

在此处输入代码:

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

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

这是文档:https://facebook.github.io/react/tips/dangerously-set-inner-html.html

例如:Working Demo

【讨论】:

  • 我期待另一种方式,风险较小,谢谢!
  • @sshmaxime 更新了答案。您可以使用 Fragment 。检查 stackblitz 链接
  • 检查问题,我修改了一些东西,我们快到了,感谢您到目前为止的帮助!
  • 好的兄弟,这样做
猜你喜欢
  • 1970-01-01
  • 2020-04-10
  • 1970-01-01
  • 2018-04-09
  • 2023-03-18
  • 2021-01-27
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多