时间戳

首页 > 解决方案 > 尝试将 FontAwesome 放入正文时出现 Next.js 链接错误

javascript - 尝试将 FontAwesome 放入正文时出现 Next.js 链接错误

问题描述

我在我的项目中使用react-fontawesome库。Next.js当我尝试将任何图标放入Link组件中时，会出现错误，我根本不明白。有人可以解释我为什么不能这样做吗？除了那个错误，应用程序工作正常 - 它重定向到正确的页面。

错误（仅在浏览器控制台中显示 - 终端中没有任何内容）：
[ ]

代码：

import Link from 'next/link'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faHeart } from '@fortawesome/free-regular-svg-icons'

const Component = () => {
    return (
        // ...
        <Link href='/followed'>
            <FontAwesomeIcon icon={faHeart} />
        </Link>
        // ...
    )
}

标签： javascriptreactjsnext.jsfont-awesome

解决方案

根据官方文档，如果它是一个功能组件，你应该forwardRef给孩子（FontAwesomeIcon这里）。意思是，功能组件默认不接受组件ref传递的prop Link。如果Link组件包装了原生元素（例如div, a），则不需要这样做，但由于您使用的是功能组件（来自第三方库或自己编写forwardRef的组件），因此组件需要作为错误状态。

import Link from 'next/link'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faHeart } from '@fortawesome/free-regular-svg-icons'
import React from 'react'
const Component = () => {
    const MyLinkComponent = React.forwardRef(({ onClick, href }, ref) => {
    return (
      <FontAwesomeIcon icon={faHeart} />
    )
    })
    return (
        // ...
        <Link href='/followed' passHref>
            <MyLinkComponent/>
        </Link>
        // ...
    )
}

另请注意，我passHref在组件中使用了 propLink来强制Link将href属性发送给其子级。默认值为false。

推荐阅读