Question

我通过继承React的Component创建了一个自定义组件，如下所示：

import React, { Component as ReactComponent, ReactElement } from "react";
import { Button as ReactButton, View } from "react-native";

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

class MyComponent extends ReactComponent<IMyComponentProps> {
  getProps() { //dummy function to check if subClass can access this function
    return this.props;
  }

  renderChildren() { //adding custom props to child MyComponents
    return React.Children.map(this.props.children, (child: ReactElement<any>) => {
      const isMyComponent: boolean =
        child && //sometimes child is undefined
        child.type &&
        typeof child.type !== "string" &&
        React.Component.prototype.isPrototypeOf(child.type.prototype) &&
        child.type.prototype instanceof MyComponent;

      if (isMyComponent) {
        return React.cloneElement(child, { isChild: true }); //newProps will get merged with the existing props
      } else {
        return child;
      }
    });
  }

  render() {
    return this.renderChildren();
  }
}

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

我在Button类的render方法中遇到以下错误：

'Button'类型中的属性'render'不能分配给基类型'MyComponent'中的相同属性。输入'（）=＆gt;元素'不能分配给'（）=＆gt;类型ReactElement []”。类型'元素'不能分配给'ReactElement []'。 “元素”类型中缺少属性“包含”。

我该如何解决这个问题？感谢

带有React Native的TypeScript：创建自定义组件

0 个答案: