我如何在 React Hook 函数中传递 HTML 并在我的组件中安全显示？

Question

我有一个自定义的反应挂钩，当我将鼠标悬停在这样的导航项上时显示弹出窗口：

<a 
  href={url} 
  onMouseEnter={(e) => showPopover(e.target)} 
  onMouseLeave={() => showPopover(false)}

> Hover me </a>

我想将内容传递给挂钩并显示在我的弹出窗口中。如果我只有文本，这将非常简单，但是弹出窗口也可以包含 JSX，例如图标组件或 HTML 标签，例如 <div> 或 <p>

那么将内容传递到我的挂钩的最佳方式是什么。这样可以吗？

<a 
  href={url} 
  onMouseEnter={(e) => showPopover(e.target, "<div>This is a div</div>")} 
  onMouseLeave={() => showPopover(false)}

> Hover me </a>

我将 HTML 字符串传递给我的钩子并通过 react-html-parser 之类的库解析它们但是，我遇到了一个问题，我还需要清理我的 HTML。是否也有可能只传递文本并以不同方式处理样式？

Answer 1

您正在尝试传输您通常不应该传输的内容。如果你想用 CSS 显示 HTML，那么这应该进入 component.

向该组件传递参数，您需要选择任何 style/icon 您想要显示和呈现组件。

if (shouldComponentARender){
    render(ComponentA)
}else if(shouldComponentBRender){
    render(ComponentB)
}

在这里，您可以轻松地只传递一个字符串或标志。那会更好地测试和扩展。

我如何在 React Hook 函数中传递 HTML 并在我的组件中安全显示？

How can i pass HTML inside React Hook Function and display inside my component secure?

sanitization

html-parsing

reactjs

react-hooks