React Native Material Ripple TypeScript子元素属性报错求助

问题描述 #

项目依赖版本：

"react-native-material-ripple": "^0.9.1",
"@types/react-native-material-ripple": "^0.9.2",

使用组件时传入children属性，触发TypeScript错误：

Overload 1 of 2, '(props: RippleProps | Readonly<RippleProps>): Ripple', gave the following error.
    Type '{ children: Element; onPress: () => void; style: { height: number; width: number; margin: number; borderRadius: number; overflow: "hidden"; alignItems: "center"; justifyContent: "center"; }; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Ripple> & Readonly<RippleProps>'.
      Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Ripple> & Readonly<RippleProps>'.
  Overload 2 of 2, '(props: RippleProps, context: any): Ripple', gave the following error.
    Type '{ children: Element; onPress: () => void; style: { height: number; width: number; margin: number; borderRadius: number; overflow: "hidden"; alignItems: "center"; justifyContent: "center"; }; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Ripple> & Readonly<RippleProps>'.
      Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Ripple> & Readonly<RippleProps>'.ts(2769)

组件官方文档明确支持children属性，但TypeScript类型定义未包含该属性，需解决此错误。

解决方案 #

方法1：手动补充类型定义 #

在项目根目录创建@types/react-native-material-ripple/index.d.ts文件，修改RippleProps接口添加children属性：

import { Component, ReactNode } from 'react';
import { ViewProps } from 'react-native';

declare module 'react-native-material-ripple' {
  export interface RippleProps extends ViewProps {
    children?: ReactNode;
    rippleColor?: string;
    rippleOpacity?: number;
    rippleDuration?: number;
    rippleSize?: number;
    rippleContainerBorderRadius?: number;
    rippleCentered?: boolean;
    rippleSequential?: boolean;
    rippleFades?: boolean;
    disabled?: boolean;
  }

  export default class Ripple extends Component<RippleProps> {}
}

保存后TypeScript会自动读取这个自定义类型文件，识别children属性。

方法2：类型断言临时绕过 #

如果不想修改类型文件，可以用类型断言强制通过检查：

import Ripple from 'react-native-material-ripple';

// 方案A：断言组件类型
<Ripple
  onPress={() => {}}
  style={{ height: 50, width: 150, borderRadius: 8, alignItems: 'center', justifyContent: 'center' }}
>
  <Text>点击按钮</Text>
</Ripple> as React.ElementType<any>

或者：

// 方案B：单独断言children属性
<Ripple
  onPress={() => {}}
  style={{ height: 50, width: 150, borderRadius: 8, alignItems: 'center', justifyContent: 'center' }}
  {...({ children: <Text>点击按钮</Text> } as any)}
/>

注意：这种方法会丢失部分类型校验，仅作为临时方案。

方法3：升级依赖版本 #

检查是否有新版本修复了类型问题，执行命令升级：

# npm
npm update react-native-material-ripple @types/react-native-material-ripple

# yarn
yarn upgrade react-native-material-ripple @types/react-native-material-ripple

升级后重新编译项目，查看错误是否消失。

内容的提问来源于stack exchange，提问作者seven