reactjs - 与 Redux (mapStateToProps) 连接的 ErrorBoundary 组件上的 TypeScript 错误

Question

我在 React/ErrorBoundary 组件上遇到类型问题，指出'typeof ErrorBoundary' 类型的参数不可分配给 'ComponentType< never >'类型的参数。

澄清一下：我使用 mapStateToProps 将其与商店中设置的用户语言首选项联系起来。

这是我的组件

interface ErrorTexts {
  texts: ErrorTextType;
}

interface Props {
  children: ReactNode | ReactNode[];
  texts: ErrorTextType;
}

interface State {
  error: Error | null;
}

class ErrorBoundary extends Component<Props, State> {
  static propTypes = {
    children: node,
    texts: errorTextsPropType
  };

  static defaultProps = {
    children: null,
    texts: defaultTexts.en.error
  };

  state: State = {
    error: null
  };

  static getDerivedStateFromError(error: Error): State {
    return { error };
  }

  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    console.error('Something unexpected had happened', error, errorInfo);
  }

  render() {
    const { error }: { error: Error | null } = this.state;
    const { texts }: ErrorTexts = this.props;

    if (error) {
      return <ErrorComponent error={error.message} texts={texts} />;
    }
    return this.props.children;
  }
}

const mapStateToProps = (state: AppState): ErrorTexts => ({
  texts: state.texts.error
});

export default connect(mapStateToProps)(ErrorBoundary);

作为参考，这些是我导入的 ErrorText 类型：

export interface ErrorTextType {
  errorLine1: string;
  errorLine2: string;
  notifyMe: string;
  title: string;
}

export const errorTextsPropType = shape({
  errorLine1: string.isRequired,
  errorLine2: string.isRequired,
  notifyMe: string.isRequired,
  title: string.isRequired
});

因此，在母组件上，我遇到了一个错误。这个 JSX 标签的 'children' 属性需要一个类型为 ' never ' 的子级，但提供了多个子级。

关于如何解决这个问题的任何想法？：/

Answer 1

不用单独编写接口Props，而是使用InferProps泛型来推断 prop 类型：

import PropTypes, { shape, InferProps} from "prop-types";

class ErrorBoundary extends Component<InferProps<typeof ErrorBoundary.propTypes>, State> {
  static propTypes = {
    children: PropTypes.node,
    texts: errorTextsPropType,
  };