如何在React中从字符串渲染HTML表格？

React默认会自动转义所有插入的字符串内容（防止XSS攻击），所以直接通过{board}渲染HTML字符串时，标签会被当成纯文本解析。要让React识别并渲染HTML结构，需要使用dangerouslySetInnerHTML属性。

实现方法 #

在承载表格的容器元素上添加dangerouslySetInnerHTML属性，属性值是一个包含__html键的对象，对应值为你的HTML表格字符串：

render() {
  // 假设这是你的表格字符串
  const board = '<table border="1"><tr><td>第一行第一列</td><td>第一行第二列</td></tr><tr><td>第二行第一列</td><td>第二行第二列</td></tr></table>';
  
  return (
    <div dangerouslySetInnerHTML={{ __html: board }} />
  );
}

重要提醒 #

dangerouslySetInnerHTML的命名是为了警示风险：如果HTML字符串来自用户输入或不可信来源，必须先做内容过滤和安全校验，避免注入恶意脚本引发XSS攻击。

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