A component is `contentEditable` and contains `children`

172 阅读1分钟

以给div添加contentEditable属性后,react提示错误,需要添加suppressContentEditableWarning属性,才能屏蔽错误提示。

通常,当带有子元素的元素也被标记为contentEditable时会出现警告,因为它不起作用。此属性将取消显示该警告。除非你正在构建一个像Draft.js这样的库来手动管理contentEditable,否则不要使用它。

还有一种方法是使用dangerouslySetInnerHTML.

dangerouslySetInnerHTML是React在浏览器DOM中使用innerHTML的替代品。通常,从代码中设置HTML是有风险的,因为它很容易在不经意间让用户受到跨站点脚本(XSS)攻击。因此,您可以直接从React设置HTML,但必须键入dangerouslySetInnerHTML并传递带有__HTML键的对象,以提醒自己这是危险的。

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

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