Question

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

我遇到的问题是内容编辑器将锚标记添加到WP的WYSIWYG编辑器中。我正在使用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>

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

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;

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

1 个答案: