agentscope-ai / agentscope-ai/agentscope
[Bug]:forwardRef 组件参数命名不规范触发 React 警告
- Lingua principale
- Python
- Stelle
- 31.5k
- Fork
- 3.5k
- Merge medio
- 1g 23h
- PR unite (30g)
- 95
Descrizione
## Issue 正文
### 问题描述
在使用 @agentscope-ai/chat@1.1.62 时,浏览器控制台会出现以下 React 警告:
```
Warning: forwardRef render
functions accept exactly two
parameters: props and ref.
Did you forget to use the ref
parameter?
```
该警告在页面加载时立即出现,影响开发体验。
### 环境信息
- Package : @agentscope-ai/chat
- Version : 1.1.62 (最新版本)
- React : 18.3.1
- Node.js : 运行时环境
### 复现步骤
1. 安装 @agentscope-ai/chat@1.1.62
2. 在项目中使用 AgentScopeRuntimeWebUI 或 ChatAnywhere 组件
3. 启动开发服务器并打开页面
4. 查看浏览器控制台,出现警告
### 期望行为
不应该出现 forwardRef 相关的 React 警告。
### 实际行为
控制台显示警告信息,指向包内的多个组件文件。
### 根本原因
多个组件在使用 React.forwardRef 时,将第一个参数命名为 _ (表示不使用),但 React 18 要求 forwardRef 的 render 函数必须正确声明 props 和 ref 两个参数。
错误写法 :
```
forwardRef(function (_, ref) {
// ...
})
```
正确写法 :
```
forwardRef(function (props, ref) {
// ...
})
```
### 受影响文件
经过源码排查,以下文件存在此问题:
文件路径 行号 当前代码 components/ChatAnywhere/Input/index.tsx 15 forwardRef(function (_, ref) { components/ChatAnywhere/Chat/index.tsx 59 forwardRef(function (_, ref) {
历史版本中还发现 (可能在 1.1.62 中已部分修复):
- components/ChatAnywhere/index.tsx
- components/ChatAnywhere/Chat/Ref.tsx
- components/Sender/index.tsx
- components/Attachments/index.tsx
- components/Bubble/BubbleList.tsx
### 建议修复方案
将所有 forwardRef(function (_, ref) 改为 forwardRef(function (props, ref) ,即使 props 参数在函数体中未使用。
### 补充说明
这是一个纯粹的代码规范问题,不影响组件功能,但会在 React 18 的严格模式下持续输出警告信息,影响开发调试体验。
建议在下个版本中修复,符合 React 官方规范要求。
## 英文版(用于国际社区)
### Describe the bug
When using @agentscope-ai/chat@1.1.62 , the browser console displays the following React warning:
```
Warning: forwardRef render
functions accept exactly two
parameters: props and ref.
Did you forget to use the ref
parameter?
```
This warning appears immediately when the page loads, affecting the development experience.
### Environment
- Package : @agentscope-ai/chat
- Version : 1.1.62 (latest)
- React : 18.3.1
- Node.js : Runtime environment
### To Reproduce
1. Install @agentscope-ai/chat@1.1.62
2. Use AgentScopeRuntimeWebUI or ChatAnywhere components in your project
3. Start the development server and open the page
4. Check the browser console, the warning appears
### Expected behavior
No forwardRef related React warnings should be displayed.
### Actual behavior
Console shows warning messages pointing to multiple component files within the package.
### Root Cause
Several components use React.forwardRef with the first parameter named _ (indicating it's unused), but React 18 requires the forwardRef render function to properly declare both props and ref parameters.
Incorrect :
```
forwardRef(function (_, ref) {
// ...
})
```
Correct :
```
forwardRef(function (props, ref) {
// ...
})
```
### Affected Files
After source code inspection, the following files have this issue:
File Path Line Current Code components/ChatAnywhere/Input/index.tsx 15 forwardRef(function (_, ref) { components/ChatAnywhere/Chat/index.tsx 59 forwardRef(function (_, ref) {
Also found in previous versions (may be partially fixed in 1.1.62):
- components/ChatAnywhere/index.tsx
- components/ChatAnywhere/Chat/Ref.tsx
- components/Sender/index.tsx
- components/Attachments/index.tsx
- components/Bubble/BubbleList.tsx
### Suggested Fix
Change all forwardRef(function (_, ref) to forwardRef(function (props, ref) , even if the props parameter is not used in the function body.
### Additional context
This is purely a code style issue that doesn't affect component functionality, but it continuously outputs warnings in React 18's strict mode, impacting the development and debugging experience.
It's recommended to fix this in the next release to comply with React's official specifications.
Guida per i contributori
Apri la guida per i contributori
Valutazione
Questa issue non è ancora stata valutata.