您可以使用带有字符串和 JSX 元素的混合数组（请参阅此处的文档）：

<MyComponent text={["This is ", <strong>not</strong>,  "working."]} />

这里有一个小提琴显示它的工作原理：http : //jsfiddle.net/7s7dee6L/

此外，作为最后的手段，您始终可以插入原始 HTML，但要小心，因为如果不清理属性值，这可能会导致跨站点脚本 (XSS) 攻击。

实际上，有多种方法可以做到这一点。

你想在你的props中使用 JSX

您可以简单地使用 {} 使 JSX 解析参数。唯一的限制与每个 JSX 元素相同：它必须只返回一个根元素。

myProp={<div><SomeComponent>Some String</div>}

最好的可读方法是创建一个函数 renderMyProp，它将返回 JSX 组件（就像标准渲染函数一样），然后简单地调用 myProp={ this.renderMyProp() }

您只想将 HTML 作为字符串传递

默认情况下，JSX 不允许您从字符串值呈现原始 HTML。但是，有一种方法可以做到这一点：

myProp="<div>This is some html</div>"

然后在您的组件中，您可以像这样使用它：

<div dangerouslySetInnerHTML=myProp={{ __html: this.renderMyProp() }}></div>

请注意，此解决方案“可以”在跨站点脚本伪造攻击中打开。还要注意你只能渲染简单的 HTML，没有 JSX 标签或组件或其他花哨的东西。

数组方式

在 React 中，您可以传递一组 JSX 元素。这意味着：

myProp={["This is html", <span>Some other</span>, "and again some other"]}

我不会推荐这种方法，因为：

• 它将创建一个警告（缺少键）
• 不可读
• 这并不是真正的 JSX 方式，它更像是一种 hack，而不是预期的设计。

孩子们的方式

为了完整性而添加它，但在react中，您还可以获取组件“内部”的所有子项。

因此，如果我采用以下代码：

<SomeComponent>
    <div>Some content</div>
    <div>Some content</div>
</SomeComponent>

然后这两个 div 将作为 SomeComponent 中的 this.props.children 可用，并且可以使用标准 {} 语法进行渲染。

当您只有一个 HTML 内容要传递给您的组件时，此解决方案是完美的（想象一个仅将 Popin 的内容作为子项的 Popin 组件）。

但是，如果您有多个内容，则不能使用子项（或者您至少需要在此处将其与其他解决方案结合使用）

你可以危险地使用SetInnerHTML

只需将 html 作为普通字符串发送

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

并在 JSX 代码中呈现如下：

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

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

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

从 React v16.02 开始，您可以使用 Fragment。

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

更多信息：https : //reactjs.org/blog/2017/11/28/react-v16.2.0-fragment-support.html

<MyComponent text={<span>This is <strong>not</strong> working.</span>} />

然后在您的组件中，您可以像这样进行props检查：

import React from 'react';
export default class MyComponent extends React.Component {
  static get propTypes() {
    return {
      text: React.PropTypes.object, // if you always want react components
      text: React.PropTypes.any, // if you want both text or react components
    }
  }
}

确保您只选择一种props类型。