Question

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

我们所有的组件都是功能组件（没有类组件）。当组件需要引用时，我们使用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道具下出现“红色波浪线”错误：

类型'{儿童？：ReactNode; }'。ts（2339）

propTypes的分配位置：

类型'{填充：必填； }'与类型'WeakValidationMap '。ts（2559）
没有共同的属性

并且在实现此<Box>组件时，该组件的名称下方会出现红色的波浪线，错误为：

类型'{儿童：元素； }”与“ IntrinsicAttributes＆RefAttributes”类型没有共同的属性。ts（2559）

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

我们到底在做什么错？

Answer 1

我不确定您对propTypes的处理方式，但是可以通过在forwardRef上设置泛型来定义prop和ref类型：

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

Playground Link

React.forwardRef功能组件

1 个答案: