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

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

好的，所以我找到的解决方案发布在这里：/sf/answers/3609923271/

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

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;