使用 TypeScript 在 React Native 中创建自定义组件 [英] Creating custom components in React Native with TypeScript

问题描述

我决定将我的 ReactNative 项目转换为 TypeScript.我是 TypeScript 的新手，发现很难用自定义组件和继承来解决这个问题.这是我的(缩小的)代码

I decided to convert my ReactNative project to TypeScript. I'm new to TypeScript and am finding it hard to fix this problem with custom components and inheritance. This is my (scaled down) code

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

interface IMyComponentProps extends React.Props<IMyComponentProps> {
  colWidth?: number;
}

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

class MyButton extends MyComponent {
  render() {
    return (
      <View {...this.getProps()}>
        <Button title={this.props.title} onPress={this.props.onPress} />
      </View>
    );
  }
}

我在 MyButton 组件中的 ...this.getProps() 上看到一个红色下划线.而且 this.props.title 和 this.props.onPress 也没有被识别.

I'm getting a red underline on ...this.getProps() in the MyButton component. Also this.props.title and this.props.onPress are not being identified.

你能帮我了解我需要为这两个类定义的类型吗.

Can you please help me with the types I need to define for these two classes.

谢谢

推荐答案

首先需要声明一个 MyButton 有更具体的 props，所以 MyComponent 必须是参数化:

First, you need to declare that a MyButton has more specific props, so MyComponent has to be parameterized:

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

然后正确扩展MyComponent并声明它的props:

Then extend MyComponent correctly and declare its props:

interface IMyButtonProps extends IMyComponentProps {
  colWidth?: number;
  title: string;
  onPress: () => void;
}


class MyButton extends MyComponent<IMyButtonProps> {
  render() {
    return (
      <View {...this.getProps()}>
        <Button title={this.props.title} onPress={this.props.onPress} />
      </View>
    );
  }
}

然后，除非您使用了难以推理的 refs，否则不要扩展 React.Props.只需将您的接口声明如下:

Then, unless you're using refs, which are hard to reason about, don't extend React.Props. Just declare your interfaces as so:

interface IMyComponentProps {
  colWidth?: number;
}
interface IMyButtonProps extends IMyComponentProps {
  title: string;
  onPress: () => void;
}

现在！

我

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

interface IMyComponentProps {
  colWidth?: number;
}

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

interface IMyButtonProps extends IMyComponentProps {
  title: string;
  onPress: () => void;
}

class MyButton extends MyComponent<IMyButtonProps> {
  render() {
    return (
      <View {...this.getProps()}>
        <Button title={this.props.title} onPress={this.props.onPress} />
      </View>
    );
  }
}

这篇关于使用 TypeScript 在 React Native 中创建自定义组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！