在Next中使用Antd组件时引入子组件报错的解决

问题描述

当我在Next项目中使用Antd组件库的时候，引入Input组件下的TextArea子组件会报错误。

import { Flex, Input, List } from "antd";

const { TextArea } = Input;

export default function Home() {
  return (
    <>
        <Flex>
            <List />
            <Flex>
                <TextArea autoSize />
            </Flex>
        </Flex>
    </>
  );
}

可见是<TextArea>组件出现了错误

问题分析

根据官方仓库下的一个issue中的一个回复可知，问题可能出现在目前的Antd子组件并不支持服务端渲染，而Next默认是采用服务端进行渲染的，因此出现了这个错误。

因此在文件头部添加"use cilent"即可解决问题。

问题解决

**在文件头部添加 "use cilent" **，使其转为客户端渲染。

参考资料

1. antd-design仓库

2. Next.js15 App Router，子组件使用文档中方式导入报错 #53879