React + Chakra UI使用Icon组件出现ForwardRef警告的解决方法

我想让这段App.tsx代码在最新版Chakra UI中正常运行，但出现了forwardRef()警告。代码改编自Chakra模板，教程用的是旧版Chakra UI，求修改方法消除警告。

原代码 #

import { HStack, Icon } from "@chakra-ui/react";

import {
    FaWindows,
    FaPlaystation,
    FaXbox,
    FaApple,
    FaLinux,
    FaAndroid,
} from "react-icons/fa";

const LinkItems = [
    { key: "windows", icon: <FaWindows /> },
    { key: "playstation", icon: <FaPlaystation /> },
    { key: "xbox", icon: <FaXbox /> },
    { key: "apple", icon: <FaApple /> },
    { key: "linux", icon: <FaLinux /> },
    { key: "android", icon: <FaAndroid /> },
];
const App = () => {
    return (
        <>
            <HStack>
                {LinkItems.map((item) => (
                    <Icon
                        style={{ marginTop: 6, marginLeft: 4 }}
                        fontSize="2xl"
                        color="gray.500"
                        key={item["key"]}
                    >
                        {item["icon"]}
                    </Icon>
                ))}
            </HStack>
        </>
    );
};

export default App;

控制台警告信息 #

警告：函数组件不能被赋予refs。尝试访问此ref会失败。你是否想要使用React.forwardRef()？

检查chakra(svg)的渲染方法。错误组件栈：
at FaWindows ()
at chunk-CAUEBMDW.js?v=7ed824e2:1701:47
at chunk-YTE2HKJK.js?v=7ed824e2:66:32
at div ()
at chunk-CAUEBMDW.js?v=7ed824e2:1701:47
at Stack2 (@chakra-ui_react.js?v=7ed824e2:40843:7)
at HStack2 ()
at App ()
at J (next-themes.js?v=7ed824e2:42:18)
at ColorModeProvider ()
at _ (next-themes.js?v=7ed824e2:44:25)
at J (next-themes.js?v=7ed824e2:42:18)
at ColorModeProvider ()
at ChakraProvider (chunk-CAUEBMDW.js?v=7ed824e2:2342:18)
at Provider ()

问题原因 #

新版Chakra UI的Icon组件会尝试给子组件传递ref，但react-icons导出的图标组件默认没有用forwardRef包裹，因此触发警告。

修改后的代码 #

import { HStack, Icon } from "@chakra-ui/react";

import {
    FaWindows,
    FaPlaystation,
    FaXbox,
    FaApple,
    FaLinux,
    FaAndroid,
} from "react-icons/fa";

const LinkItems = [
    { key: "windows", icon: FaWindows },
    { key: "playstation", icon: FaPlaystation },
    { key: "xbox", icon: FaXbox },
    { key: "apple", icon: FaApple },
    { key: "linux", icon: FaLinux },
    { key: "android", icon: FaAndroid },
];
const App = () => {
    return (
        <>
            <HStack>
                {LinkItems.map((item) => (
                    <Icon
                        style={{ marginTop: 6, marginLeft: 4 }}
                        fontSize="2xl"
                        color="gray.500"
                        key={item.key}
                        as={item.icon}
                    />
                ))}
            </HStack>
        </>
    );
};

export default App;

关键改动点 #

• 将LinkItems中的icon值从<FaWindows />改为FaWindows（传递组件本身而非JSX元素）
• 给Icon组件添加as={item.icon}属性，替代原来的子元素嵌套写法

这样Chakra UI就能正确处理ref传递，不会再触发警告。

内容的提问来源于stack exchange，提问作者vpappano