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

Question

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

我们所有的组件都是功能组件（没有类组件）。 当组件需要 ref 时，我们使用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<RefAttributes>'.ts(2559) 相同的属性

并且在实现这个<Box>组件时，组件名称下出现红色波浪线，错误是：

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

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

我们到底做错了什么？

Answer 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>
  );
});

游乐场链接