带有 React.forwardRef 功能组件的 VSCode TS 错误

Posted 2023-03-13

【中文标题】带有 React.forwardRef 功能组件的 VSCode TS 错误

【英文标题】：VSCode TS error with React.forwardRef functional component

【发布时间】：2021-02-18 14:45:25

【问题描述】：

我们正在使用 javascript（不是 TypeScript）来编写我们的组件库，我们在项目的 jsconfig.json 文件中有 checkJs: true。

我们所有的组件都是函数式组件（没有类组件）。当组件需要引用时，我们使用React.forwardRef。

为了这个问题的一个组件示例；不是一个实际的组件，而是展示我们如何编写我们的组件：

import React from 'react';
import  View  from 'react-native';
import propTypes from './propTypes';

export const Box = React.forwardRef(( padding, children , ref) => 
  return (
    <View ref=ref style= padding >
      children
    </View>
  );
);

Box.propTypes = propTypes;

但是，这会导致 padding 属性下出现“红色波浪线”错误：

类型 ' children?: ReactNode; 上不存在属性 'padding' '.ts(2339)

propTypes 的分配位置：

类型 ' 填充：必需； ' 与类型 'WeakValidationMap'.ts(2559)

没有共同的属性

而在实现这个<Box>组件的时候，组件的名字下面出现了红色的波浪线，报错是：

类型'孩子：元素; ' 与类型 'IntrinsicAttributes & RefAttributes'.ts(2559) 没有共同的属性

代码本身是有效的，将checkJs 更改为false 可以解决此问题，但我们希望保留checkJs true。

我们到底做错了什么？

【参考方案1】：

我不确定你在用 propTypes 做什么，但你可以通过在 forwardRef 上设置泛型来定义 props 和 ref 类型：

export const Box = React.forwardRef<View, padding?: string | number>(( padding, children , ref) => 
  return (
    <View ref=ref style= padding >
      children
    </View>
  );
);

Playground Link