react-spring 类型错误,Property ‘children‘ does not exist on type ‘IntrinsicAttributes & AnimatedProps

在使用@react-spring/web的animated组件时发现了一个类型错误,有issue:https://github.com/pmndrs/react-spring/issues/2358

但是我没找到解决方案

所以决定自己修改原类型文件,注意⚠️这只是个临时的解决办法,尚不清楚对其他类型是否有影响

添加补丁:

diff --git a/node_modules/@react-spring/web/dist/react-spring_web.modern.d.ts 
b/node_modules/@react-spring/web/dist/react-spring_web.modern.d.ts
index f647f1b..a18ef5c 100644
--- a/node_modules/@react-spring/web/dist/react-spring_web.modern.d.ts
+++ b/node_modules/@react-spring/web/dist/react-spring_web.modern.d.ts
@@ -24,7 +24,9 @@ type AnimatedComponent<T extends ElementType> = ForwardRefExoticComponent<Animat
 }>>;
 /** The props of an `animated()` component */
 type AnimatedProps<Props extends object> = {
-    [P in keyof Props]: P extends 'ref' | 'key' ? Props[P] : AnimatedProp<Props[P]>;
+    [P in keyof Props]: P extends 'ref' | 'key' | 'children' ? Props[P] : 
AnimatedProp<Props[P]>;
+} & {
+    children?: React.ReactNode;
 };
 type StyleProps = Merge<CSSProperties, TransformProps>;
 type StylePropKeys = keyof StyleProps;

不知道怎么添加补丁可以看:怎么修改node_modules里的文件,怎么使用patch-package修改node_modules的文件,怎么修改第三方库原文件。-优快云博客

你遇到的这个错误: ``` Type &#39;{ areaId: string | undefined; initialNodes: Node&lt;any, string | undefined&gt;[]; initialEdges: Edge&lt;any&gt;[]; editable: false; proNodeClick: (event: MouseEvent&lt;Element, MouseEvent&gt;, node: Node&lt;...&gt;) =&gt; void; }&#39; is not assignable to type &#39;IntrinsicAttributes &amp; FlowChartEditorProps &amp; { children?: ReactNode; }&#39;. Property &#39;proNodeClick&#39; does not exist on type &#39;IntrinsicAttributes &amp; FlowChartEditorProps &amp; { children?: ReactNode; }&#39;. Did you mean &#39;onNodeClick&#39;? ``` 是一个典型的 **TypeScript 类型不匹配错误**,它的核心意思是: &gt; 你传入了一个叫 `proNodeClick` 的属性,但组件 `FlowChartEditor` 并没有定义这个属性,它只接受 `onNodeClick`。 --- ## ✅ 错误原因 你给组件传入了: ```tsx proNodeClick={handleNodeClick} ``` 但你的组件定义中只接受: ```tsx onNodeClick?: (event: React.MouseEvent, node: Node) =&gt; void; ``` 所以 TypeScript 报错,说 `proNodeClick` 不是一个合法的 prop。 --- ## ✅ 解决方案:将 `proNodeClick` 改为 `onNodeClick` ### ✅ 正确写法: ```tsx &lt;FlowChartEditor areaId={domainId || undefined} initialNodes={nodes} initialEdges={edges} editable={false} onNodeClick={handleNodeClick} // ✅ 改成 onNodeClick /&gt; ``` --- ## ✅ 同时确保你的组件定义支持 `onNodeClick` 在你的组件定义中: ```tsx interface FlowChartEditorProps { initialNodes?: Node[]; initialEdges?: Edge[]; editable?: boolean; onNodeClick?: (event: React.MouseEvent, node: Node) =&gt; void; // ✅ 必须有这个定义 } ``` 如果你之前写的是: ```tsx proNodeClick?: (event: React.MouseEvent, node: Node) =&gt; void; ``` 那也请改为: ```tsx onNodeClick?: (event: React.MouseEvent, node: Node) =&gt; void; ``` --- ## ✅ 完整修复步骤总结 | 步骤 | 操作 | |------|------| | 1 | 将 `proNodeClick` 改为 `onNodeClick` | | 2 | 确保组件 `props` 类型中包含 `onNodeClick` | | 3 | 确保事件函数签名一致:`(event: React.MouseEvent, node: Node) =&gt; void` | --- ## ✅ 示例:完整修复后的代码 ### ✅ 组件定义中: ```tsx interface FlowChartEditorProps { initialNodes?: Node[]; initialEdges?: Edge[]; editable?: boolean; onNodeClick?: (event: React.MouseEvent, node: Node) =&gt; void; // ✅ 正确命名 } ``` ### ✅ 使用组件时: ```tsx &lt;FlowChartEditor areaId={domainId || undefined} initialNodes={nodes} initialEdges={edges} editable={false} onNodeClick={handleNodeClick} // ✅ 正确命名 /&gt; ``` --- ## ✅ TypeScript 小贴士 | 写法 | 含义 | |------|------| | `prop?: T` | 表示该 prop 是可选的 | | `prop: T | undefined` | 明确允许 `undefined` 值 | | `prop={value || undefined}` | 如果 value 不存在,则传 undefined | --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

学途路漫漫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值