reactjs - 如何将无头 wordpress href 转换为
问题描述
不确定这是否可行,但我将 Next.js 与 WordPress API 又名无头 wordpress 一起使用。我正在输出一个由文本和链接组成的古腾堡区域。链接的问题在于它们不是通过 Next.js 方式完成的,当您单击一个链接时,您可以在控制台中看到它正在重新加载整个页面,而不是在不刷新的情况下进行链接。
所以,如果我在 Next.js 中设置链接,我会这样做
<Link href="/posts/first-post">
<a>this page!</a>
</Link>
但是因为我正在这样做
<div
className="content"
dangerouslySetInnerHTML={{
__html: DOMPurify.sanitize(homeData.kidsSectionContent),
}}
/>
我得到了 WordPress 给我的任何东西<a href="some-page">click me<a/>
解决方案
我不认为它像你想要的那样工作。因为<Link
实际上是 JSX 代码,它只是转换为 javascript 的类似 html 的代码。
实际上,<Link ...>
语法被编译为:
const Link = require("path/to/Link.js");
React.createElement(Link, {props});
您正在从 api 获取原始 html 数据,并且您希望将该数据转换为已编译的 javascript。所以它可以连接到 React 中。据我了解,这可能是可能的,但不是很有用。因为一个简单的破坏 html 结果,会破坏你的页面。
我认为您需要问自己为什么要使用单页行为。
但是,我认为如果你可以用响应式语法替换你的 html,然后用 JSX 解析它,你可能会得到你想要的。但它可能会很慢,并且可能会破坏页面。
推荐阅读
- swift - 使用苹果统一日志os_log时,是否需要使用DispatchQueue.async?
- multithreading - OpenMP 的循环调度如何影响 ccNUMA 的性能?
- android - 在 Dart / Flutter 中将值从 min/max 重新映射到 max/min
- python - 需要有关我现有代码中的功能的帮助
- reactjs - 如何在reactjs中的img标签上显示二进制图像
- html - 如何修复增长的块内的文本
- c# - LINQ 比较属性值不相等的两个列表
- x86 - 用弯路钩住非windows api函数
- git - 我可以配置 git 以便更轻松地从 GitHub 克隆吗?
- verilog - 可能重置域交叉?