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

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

我同意这个错误令人困惑。

有什么问题？

本质上，这是由于没有正确指定 SomeComponent 的 Props 的类型，导致 TypeScript 假定了最低限度的类型定义，其中不包括 style 属性.

我该如何解决？

为您希望被 SomeComponent 接受的道具添加一个界面，其方式与您之前使用 PropTypes.

所做的方式大致相同

//SomeComponent.tsx

interface SomeComponentProps {
    style: React.CSSProperties;
}

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

你是怎么想出来的？

有一些线索。第一个是 Type '{ style: { flex: number; }; }' 部分，它看起来非常像您在 OtherComponent.tsx 中使用 SomeComponent 时指定的属性（a.k.a.props）。所以它可能与 SomeComponent.

的道具有关

错误的下一部分是 is not assignable to type，确认 TypeScript 认为道具的类型与它所知道的 SomeComponent.

不匹配

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

将所有这些线索与关于如何使用两个可选的泛型类型参数在 TypeScript 中强类型自定义 React 组件的 props 和状态的先验知识相结合，React.Component 引导我找到最终的解决方案。

希望您现在感觉更有能力在将来破译类似的令人困惑的错误消息。

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

Using .tsx components in other .tsx components in React Native

javascript

typescript

react-native

react-tsx

有什么问题？

我该如何解决？

你是怎么想出来的？