Question

我正在自学在React Native中使用TypeScript构建应用程序。作为Swift开发人员，JS和TS需要一点时间来适应。

我注意到的一件事是，似乎无法使用我在Render方法中另一个tsx文件中的tsx文件中编写的组件。

//SomeComponent.tsx

export default class SomeComponent extends Component {
    //all my logic
}

//OtherComponent.tsx
export default class ScoreTable extends Component {
    //logic
    render() {

      <SomeComponent style={{flex: 1}}></SomeComponent>
    }
}

这会给我以下错误：

Type '{ style: { flex: number; }; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<SomeComponent> & Readonly<{}> & Readonly<{ children?: ReactNode; }>'.

我可以通过将tsx SomeComponent转换为.js组件来解决此问题，但是我真的很喜欢tsx语法。 我的问题是，为什么我不能在其他tsx组件中使用.tsx组件？还是有其他方法可以做到这一点？

Answer 1

您需要将style定义为SomeComponent接受的道具：

import React, { Component, CSSProperties } from "react";

interface Props {
  style: CSSProperties;
}

export default class SomeComponent extends Component<Props> {

Answer 2

我同意此错误令人困惑。

出什么问题了？

从本质上讲，这是由于未正确指定Props的{{1}}的类型，导致TypeScript假定了最基本的最小类型定义，其中不包含SomeComponent属性。

我该如何解决？

为您希望被SomeComponent接受的道具添加一个接口，就像以前使用style所做的一样。

PropTypes

您是如何发现的？

有一些线索。第一个是//SomeComponent.tsx interface SomeComponentProps { style: React.CSSProperties; } export default class SomeComponent extends Component<SomeComponentProps> { //all my logic }部分，看起来非常像您在Type '{ style: { flex: number; }; }'中使用SomeComponent时指定的属性（也称为道具）。因此，它可能与OtherComponent.tsx的道具有关。

错误的下一部分显示为SomeComponent，确认TypeScript认为道具的类型与它对is not assignable to type的了解不符。

错误的最后一部分是最令人困惑的地方，它列出了类型SomeComponent。在我的React代码中搜索'IntrinsicAttributes & IntrinsicClassAttributes<SomeComponent> & Readonly<{}> & Readonly<{ children?: ReactNode; }>'可以使我看到它确实与组件期望的属性的基本类型有关（我在IntrinsicAttributes中找到了它，它是react的类型定义）。

将所有这些线索与如何使用node_modules/@types/react/index.d.ts的两个可选泛型类型参数在TypeScript中强力键入道具和自定义反应组件的状态的先验知识相结合，将我带到最终解决方案。

希望您现在能更有能力解密将来同样令人困惑的错误消息。

在React Native中的其他.tsx组件中使用.tsx组件

2 个答案:

出什么问题了？

我该如何解决？

您是如何发现的？