在道具中发送 HTML 标签 - 反应

Question

我需要一些功能或技巧来允许在 react 的 props 中使用 HTML 标签，因为我正在使用 ckeditor 作为表单。

我的代码：

render(){
    let name = this.props.name;
    let text = this.props.description;
    console.log(text);
    return (
        <li class="collection-item avatar">
          <span class="title"> <strong> {name} </strong> </span>
          <p > {text} </p>
          <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
        </li>
      )
  }
}

Answer 1

dangerouslySetInnerHTML 可能会对您有所帮助。

文档示例：

function createMarkup() { return {__html: 'First · Second'}; };
<div dangerouslySetInnerHTML={createMarkup()} />

请记住，直接设置 html 会导致 XSS，因此您应该尽可能避免这些东西。