React中是否有比dangerouslySetInnerHTML更优的HTML实体编码方案？

嘿，我刚好处理过类似的场景，当你的API返回的JSON里包含HTML实体或标签时，React默认会把这些内容转义成纯文本显示，这时候dangerouslySetInnerHTML就是正确的解决方式——不过听名字也知道，用它的时候得留点心安全问题。

完整示例代码 #

下面是补全后的组件示例，你可以直接参考：

class SinglePage extends React.Component {
  render() {
    // 先做空值处理，避免渲染时因数据缺失报错
    const post = this.props.selectedPost || {};
    // 按照React要求的格式，把HTML内容包裹在__html属性中
    const postContent = { __html: post.content || '' };

    return (
      <div id="page" className="single-page layout sb-content-sb">
        <main id="content" className="single-page-content">
          {/* 标题这类无HTML的内容直接渲染即可 */}
          <h1>{post.title}</h1>
          {/* 使用dangerouslySetInnerHTML解析并渲染HTML内容 */}
          <div className="post-body" dangerouslySetInnerHTML={postContent} />
        </main>
      </div>
    );
  }
}

关键注意事项 #

• 格式要求：React强制要求dangerouslySetInnerHTML的值是一个包含__html键的对象，不能直接传入字符串，这点一定要注意。
• 安全风险：这个属性会直接将HTML插入DOM，如果API返回的内容包含恶意脚本（比如用户提交的XSS代码），会直接执行。所以必须确保你的API来源是完全可信的，或者在渲染前对内容做安全过滤（比如移除<script>标签等）。
• 空值兜底：记得给内容设置默认值，避免post.content为undefined或null时触发报错。

如果是用函数式组件开发，写法逻辑完全一致，只是把props换成函数参数即可：

const SinglePage = ({ selectedPost = {} }) => {
  const postContent = { __html: selectedPost.content || '' };
  
  return (
    <div id="page" className="single-page layout sb-content-sb">
      <main id="content" className="single-page-content">
        <h1>{selectedPost.title}</h1>
        <div className="post-body" dangerouslySetInnerHTML={postContent} />
      </main>
    </div>
  );
};

内容的提问来源于stack exchange，提问作者grazdev