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

问题描述

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

<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。是否也有可能只传递文本并以不同的方式处理样式？

解决方法

您正试图转移通常不应该转移的东西。如果您想显示带有 CSS 的 HTML，则应将其放入组件。

将您需要选择要显示和呈现组件的任何样式/图标的参数传递给该组件。

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

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