React Native转TypeScript：自定义组件继承问题求助

嘿，作为刚转TypeScript的React Native开发者，你遇到的组件继承类型问题真的很典型——我当初刚上手时也踩过类似的坑。咱们先从你代码里的核心问题入手，一步步修正：

1. 先修正基础组件的Props定义 #

你原来写的IMyComponentProps extends React.Props<IMyComponentProps>会触发循环引用，而且React.Props这个类型早就过时了。正确的做法是直接定义组件的自有Props，要是需要继承React Native内置组件的基础属性（比如View的样式、children等），可以用ViewProps这类内置类型：

import React, { Component } from "react";
import { Button, View, ViewProps } from "react-native";

// 继承View的基础Props，再加上自定义的colWidth
interface IMyComponentProps extends ViewProps {
  colWidth?: number;
}

class MyComponent extends Component<IMyComponentProps> {
  getProps() {
    return this.props;
  }

  render() {
    return (
      <View style={{ width: this.props.colWidth || '100%' }}>
        {/* 预留子内容插槽 */}
        {this.props.children}
      </View>
    );
  }
}

2. 正确实现继承的MyButton组件 #

现在让MyButton继承MyComponent，关键是要把它的专属Props和父组件的Props正确合并，同时给父组件传递正确的泛型参数：

// 继承父组件的Props，再添加按钮专属属性
interface IMyButtonProps extends IMyComponentProps {
  buttonText: string;
  onPress: () => void;
}

class MyButton extends MyComponent<IMyButtonProps> {
  render() {
    // 可以调用父组件的getProps获取所有属性
    const parentProps = this.getProps();
    
    return (
      // 复用父组件的布局逻辑
      <MyComponent {...parentProps}>
        <Button title={this.props.buttonText} onPress={this.props.onPress} />
      </MyComponent>
    );
  }
}

3. 几个关键提醒 #

• 别过度依赖继承：React官方其实更推荐用组合而非继承来复用代码（比如把MyComponent作为MyButton的子组件），这样更灵活，也能避免继承带来的类型复杂度。
• 泛型要传准：继承父组件时，一定要把当前组件的Props类型传给父组件的泛型参数，不然TypeScript会无法正确推断props的类型。
• 避免循环引用：Props接口绝对不能extends自身的React.Props类型，这是你最初代码里的核心问题。

最后给个使用示例 #

你可以这样调用这两个组件，TypeScript会自动帮你做类型校验：

// 使用基础布局组件
<MyComponent colWidth={200} style={{ backgroundColor: '#f0f0f0' }}>
  <Text>这是基础组件的内容</Text>
</MyComponent>

// 使用继承的按钮组件
<MyButton 
  colWidth={150} 
  buttonText="点击触发" 
  onPress={() => alert('按钮被点击啦')} 
/>

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