如何使用 `dangerouslySetInnerHTML` 将 WP API 中的锚链接转换为 Next.js <Links>答案

【问题标题】：How to transform anchor links from WP API into Next.js <Links> using `dangerouslySetInnerHTML`如何使用 `dangerouslySetInnerHTML` 将 WP API 中的锚链接转换为 Next.js <Links>
【发布时间】：2019-08-27 13:09:51
【问题描述】：

我正在为 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，导致页面损坏。

【问题讨论】：

标签： reactjs wordpress next.js

【解决方案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;

【讨论】：