React中的HTML和ES6模板字面量

Question

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

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

虽然它肯定不起作用，但我猜这表明了我的意图。有什么办法让它起作用吗？

- Stanley Luo

Answer 1

不要使用 dangerouslySetInnerHTML 进行此操作。那是一个反模式。

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

MyComponent的children属性可以访问2个span元素和1个strong元素。

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>

- Mulan

Answer 2

您不能向组件传递字符串化的HTML，因为这会引起XSS漏洞。

如果您必须渲染HTML，则必须使用dangerouslySetInnerHTML 来源：source:

dangerouslySetInnerHTML 是React用于替换在浏览器DOM中使用innerHTML的方法。通常情况下，从代码设置HTML是很危险的，因为很容易无意中将用户暴露于跨站脚本（XSS）攻击。因此，您可以直接从React设置HTML，但您必须键入 dangerouslySetInnerHTML并传递一个具有__html键的对象，以提醒自己这很危险。例如：

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

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

- Blair Anderson

---

啊，我明白了，感谢您的快速回答。看来我应该避免使用这个，有什么办法可以让我的文本部分加粗呢？ - Stanley Luo

如果文本不来自用户输入，例如它是硬编码的，那么使用dangerouslySetInnerHTML是可以的。 - Aruna Herath

@StanleyLuo 这里有一个 React 组件可以帮你实现这个功能 https://github.com/bvaughn/react-highlight-words#usage - Blair Anderson