Как создать экземпляр подключенного компонента в проекте Typescript React? - PullRequest
0 голосов
/ 04 мая 2019

Этот проект создан с различными компонентами, которые очень мало связаны друг с другом и должны отображаться рядом.Таким образом, я хочу настроить приложение так, чтобы каждый основной компонент запрашивал хранилище Redux отдельно.Только пример в документации показывает состояние, которое передается в верхний компонент и затем разбивается для каждого подкомпонента.

Это снимок приложения ввремя, когда я сталкиваюсь с моей ошибкой.

Проще говоря, я получаю эту ошибку, когда я пытаюсь создать экземпляр подключенного реагирующего компонента в неподключенном реагирующем компоненте:

ERROR in /Users/savanni/src/dashboard/src/main.tsx
./src/main.tsx
[tsl] ERROR in /Users/savanni/src/dashboard/src/main.tsx(22,8)
      TS2741: Property 'predictions' is missing in type '{}' but required in type 'Readonly<Pick<Props, "predictions">>'.

Упрощенная версиямоего основного компонента выглядит следующим образом:

const AppMain = () => (
  <div className={csn(["flex", "full-width"])}>
    <TransitView />
    <WeatherView />
  </div>
)

У меня TransitView настроен так:

interface Props {
  predictions: Array<mbta.RawPrediction>
}

export const Transit: React.SFC<Props> = ({ predictions }) => (
  <div>
    {predictions.map(prediction => (
      <Prediction key={prediction.id} prediction={prediction} />
    ))}
  </div>
)

export default connect((state: AppState) => {
  predictions: getPredictions(state)
})(Transit)

Наконец, я создаю экземпляр моего AppMain из компонента <Provider>.

Тем не менее, я получаю эту ошибку типа в объявлении <TransitView />.

Причина, по которой меня это ставит в тупик, заключается в том, что я знаю из сборки предыдущих приложений (но в Javascript), что TransitView не принимает никакихкомпоненты и что провайдер и соединение редукса передадут параметр состояния в правильное местоположение.

Итак, как мне успокоить Typescript?

Ответы [ 2 ]

0 голосов
/ 06 мая 2019

Весь беспорядок сводился к вводящему в заблуждение сообщению об ошибке.

Хотя эта ошибка могла быть правильной, соответствующая ошибка была в этом коде:

export default connect((state: AppState) => {
  predictions: getPredictions(state),
})(Transit)

Обратите внимание, что в моем параметре для подключения это функция к блоку, а не функция к словарю. Правильный код включает только один дополнительный набор скобок.

export default connect((state: AppState) => ({
  predictions: getPredictions(state),
}))(Transit)

Технически это означает, что у меня нет хорошей сигнатуры типа для connect. На самом деле я не могу понять сигнатуру типа для connect в @types/react-redux, поэтому я не могу ни исследовать это дальше, ни определить, является ли это предполагаемым поведением.

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

0 голосов
/ 04 мая 2019

Импортируете ли вы правильный экспорт?

Вы экспортируете подключенный компонент по умолчанию, поэтому вы должны импортировать экспорт по умолчанию.

например, вам следует импортировать экспорт по умолчанию

import TransitView from './transitView'

вы должны не импортировать именованный экспорт

import { Transit } from './transitView'
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...