Question

我将一些文字传递给组件：

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

虽然它肯定无法奏效，但我想这表明我的意图很好。知道如何让它发挥作用吗？

Answer 1

您无法将字符串化的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()} />;
}

Answer 2

请勿使用dangerouslySetInnerHTML。这是一种反模式。

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

可通过MyComponent span属性

访问2个strong和1个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>

React和ES6模板文字中的HTML

2 个答案: