如何解决如何在 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)
}
在这里,您可以轻松地只传递一个字符串或标志。这将更好地可测试和可扩展。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。