Использование компонентов .tsx в других компонентах .tsx в React Native - PullRequest
Новая
       15

Использование компонентов .tsx в других компонентах .tsx в React Native

1 голос
/ 15 мая 2019

Я учу себя создавать приложения с TypeScript в React Native.Как разработчик Swift, JS и TS немного привыкли.

Одна вещь, которую я заметил, это то, что кажется невозможным использовать компонент, который я написал в файле tsx, внутри другого файла tsx в методе Render. 

//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?Или есть другой способ сделать это?

Ответы [ 2 ]

1 голос
/ 15 мая 2019

Я согласен, что эта ошибка сбивает с толку.

В чем проблема?

По сути, это связано с неправильным указанием типа для Props из SomeComponent, что приводит к тому, что 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; }; }', которая очень похожа на атрибуты (реквизиты), которые вы указываете при использовании SomeComponent в OtherComponent.tsx. Так что, вероятно, это как-то связано с реквизитом для SomeComponent.

Следующая часть ошибки гласит is not assignable to type, подтверждая, что TypeScript считает, что тип реквизита не соответствует тому, что он знает о SomeComponent.

Последняя часть ошибки является наиболее запутанной, где она перечисляет тип 'IntrinsicAttributes & IntrinsicClassAttributes<SomeComponent> & Readonly<{}> & Readonly<{ children?: ReactNode; }>'. Поиск IntrinsicAttributes в моем коде React позволил мне увидеть, что это действительно было связано с базовым типом атрибутов, ожидаемых компонентом (я нашел это в node_modules/@types/react/index.d.ts, определения типа для реакции).

Объединение всех этих подсказок с предшествующими знаниями о том, как строго набирать реквизиты и состояние пользовательских компонентов реагирования в TypeScript с использованием двух необязательных параметров универсального типа для React.Component, приводит меня к окончательному решению.

Надеюсь, теперь вы чувствуете больше возможностей для расшифровки подобных сбивающих с толку сообщений об ошибках в будущем.

1 голос
/ 15 мая 2019

Вы должны определить style как опору, которую принимает ваш SomeComponent: 

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

interface Props {
  style: CSSProperties;
}

export default class SomeComponent extends Component<Props> {
...