如何使用<Links>"dangerouslySetInnerHTML"将锚链接从WP API转换为Next.js

Question

我正在为React(Next.js(+ Wordpress API应用程序使用无头方法。

我遇到的问题是当内容编辑器将锚标记添加到 WP 的所见即所得编辑器中时。我正在使用 React 的dangerouslySetInnerHTML解析该内容，因此生成了一个普通<a href="whatever">。

如何将其转换为next.js<Link>标签？

不确定这是否有帮助，但这是我的代码片段：

<React.Fragment>
<h1>Page: {title.rendered}</h1>
<div
className="richtext"
dangerouslySetInnerHTML={{ __html: content.rendered }}
></div>
{wpData.acf.modules.map((mod, index) => (
<React.Fragment key={`module=${index}`}>
{renderComponents(mod)}
</React.Fragment>
))}
</React.Fragment>

由于我使用的是解耦解决方案，因此锚标记指向服务器 URL，这会导致页面损坏。

Answer 1

好的，所以我找到的解决方案发布在这里：https://stackoverflow.com/a/51570332/11983936

基本上将内容显示分解到它自己的辅助函数中，并在我需要的组件中使用它：

import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import { useRouter } from 'next/router';
import fixLink from './fixLink';
const useRenderRichtext = props => {
const router = useRouter();
const handleAnchorClick = e => {
const targetLink = e.target.closest('a');
if (!targetLink) return;
e.preventDefault();
const redirectThis = fixLink(targetLink.href);
router.push(`/${redirectThis}`);
};
return (
<Fragment>
<div
onClick={handleAnchorClick}
onKeyPress={handleAnchorClick}
className="richtext"
dangerouslySetInnerHTML={{ __html: props }}
></div>
</Fragment>
);
};
export default useRenderRichtext;