Next.js 13中为何子组件无法使用useState？

核心误解："use client"的作用范围不包含props传入的children #

官方文档里提到的"一旦文件中定义了'use client'，所有导入到该文件的模块，包括子组件，都被视为客户端包的一部分"，这里的**"导入到该文件的模块"特指通过import语句直接引入到这个"use client"文件里的模块**，而非通过组件props传递进来的children。

你的代码报错的具体原因 #

1. page.tsx是默认的服务端组件（未标记"use client"），它直接导入了Child组件，所以Child会被默认当作服务端组件处理。
2. Child里使用了useState这类客户端专属的React API，服务端组件不允许使用这类API，因此触发报错。
3. 虽然Parent是客户端组件，但Child是作为children从服务端组件page.tsx传递过来的，它的组件类型由导入它的文件（page.tsx）决定，和包裹它的Parent没有关系。

两种可行的修复方式 #

• 给Child组件添加"use client"标记：在Child.tsx的最顶部（所有导入语句之前）加上'use client';，明确将它标记为客户端组件。
• 在Parent组件内部导入Child：把Child的导入代码移到Parent.tsx里，直接在Parent组件内部渲染Child，不再通过props接收。这样Child会被Parent这个"use client"文件导入，自动归为客户端组件。

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