React 中的 HTML 和 ES6 模板文字答案

【问题标题】：HTML in React and ES6 Template LiteralReact 中的 HTML 和 ES6 模板文字
【发布时间】：2016-11-07 03:08:18
【问题描述】：

我正在向组件传递一些文本：

<Component 
 text={`text with <span style={{fontWeight:bold}}>${thisPart}</span> emphasized`}
/>

虽然它肯定行不通，但我想它很好地表明了我的意图。知道如何使它工作吗？

【问题讨论】：

标签： reactjs ecmascript-6

【解决方案1】：

不要为此使用dangerouslySetInnerHTML。这是一种反模式。

<MyComponent>
 <span>text with</span>
 <strong>{thisPart}</strong>
 <span>emphasized</span>
</MyComponent>

2 个span 和1 个strong 元素可通过MyComponent children 属性访问

class MyComponent extends React.Component {
  render () {
    return (
      <div>
        <p>some text</p>
        <p>{this.props.children}</p>
      </div>
    )
  }
}

会渲染

<div>
  <p>some text</p>
  <p>
    <span>text with</span>
    <strong>this part</strong>
    <span>emphasized</span>
  </p>
</div>

【讨论】：

【解决方案2】：

您不能将字符串化的 HTML 传递给组件，因为它会打开 XSS 漏洞。

如果您必须渲染 html，那么您需要使用 dangerouslySetInnerHTML

source:

dangerouslySetInnerHTML 是 React 在浏览器 DOM 中使用 innerHTML 的替代品。一般来说，从代码中设置 HTML 是有风险的，因为很容易无意中将您的用户暴露给跨站点脚本 (XSS) 攻击。所以，你可以直接从 React 中设置 HTML，但你必须输入 dangerouslySetInnerHTML 并使用 __html 键传递一个对象，以提醒自己这很危险。例如：

function createMarkup() {
  return {__html: 'First &middot; Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

【讨论】：

啊，我明白了，感谢您的快速回答。似乎我应该避免使用它，知道如何简单地将我的部分文本加粗吗？
如果文本不是来自用户输入，例如，如果它是硬编码的，则可以使用 dangerouslySetInnerHTML
@StanleyLuo 这是一个为你做这件事的反应组件github.com/bvaughn/react-highlight-words#usage