使用wp.element.createElement()插入HTML却显示为文本，求解决方法

你碰到的这个问题其实是React（wp.element的createElement底层基于React）的安全机制在起作用——它会自动转义所有字符串内容，防止XSS攻击，所以你的<input>标签被当成纯文本渲染出来了。

要让HTML内容被正确解析渲染，你需要使用dangerouslySetInnerHTML这个特殊属性，这是React专门用来插入原始HTML的方式。修改后的代码如下：

wp.element.createElement(
  Meta,
  { 
    className: 'TEST', 
    title: 'TEST', 
    initialOpen: true 
  },
  // 用一个容器元素包裹，通过dangerouslySetInnerHTML插入HTML
  wp.element.createElement('div', {
    dangerouslySetInnerHTML: {
      __html: 'Here is html: <input type="text">'
    }
  })
);

需要注意的是：

• 必须用__html作为属性值的键名（双下划线开头），这是React规定的格式
• 这个属性之所以带"dangerously"前缀，是因为直接插入未过滤的HTML存在XSS风险，如果你的内容来自用户输入或不可信来源，一定要先做严格的内容过滤和转义，避免安全漏洞

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