React Native TypeScript类组件继承报错：render无法兼容基类属性

出现Property 'render' in type 'HomeView' is not assignable to the same property in base type 'RouteView'错误，核心是子类的render方法和基类的定义不匹配，常见原因和解决方法如下：

• 返回值类型不匹配
  基类RouteView的render返回值类型如果比子类更严格，就会触发该错误。比如基类定义返回JSX.Element，但子类render可能返回null或undefined，而JSX.Element不包含这些类型。
  错误示例：

  class RouteView extends React.Component {
    render(): JSX.Element {
      return <View />;
    }
  }
  
  class HomeView extends RouteView {
    render() {
      // 返回类型隐式为JSX.Element | null，和基类的JSX.Element不兼容
      if (!this.props.isReady) return null;
      return <Text>Home</Text>;
    }
  }
  

  解决：统一返回值类型，把基类的返回类型改成React.ReactNode（它包含null、undefined、React元素等所有合法的渲染结果）：

  class RouteView extends React.Component {
    render(): React.ReactNode {
      return <View />;
    }
  }
  
  class HomeView extends RouteView {
    render(): React.ReactNode {
      if (!this.props.isReady) return null;
      return <Text>Home</Text>;
    }
  }
  

• 访问修饰符或方法签名不一致
  如果基类的render用了特定访问修饰符（比如protected），子类用了不同的修饰符（比如public），或者基类定义了不符合React规范的参数，都会导致不兼容。
  错误示例：

  class RouteView extends React.Component {
    protected render(): React.ReactNode {
      return <View />;
    }
  }
  
  class HomeView extends RouteView {
    public render(): React.ReactNode {
      return <Text>Home</Text>;
    }
  }
  

  解决：保持子类的访问修饰符和基类一致，或者把基类的render改成public（React组件的render本来就是公开方法，没必要用protected）。

• 基类错误定义render为readonly属性
  如果基类把render定义成箭头函数形式的readonly属性，子类无法覆盖它，也会触发错误。
  错误示例：

  class RouteView extends React.Component {
    readonly render = () => <View />;
  }
  
  class HomeView extends RouteView {
    render() {
      return <Text>Home</Text>;
    }
  }
  

  解决：基类改用标准的类方法定义render，不要用箭头函数的readonly形式。

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