Этот проект создан с различными компонентами, которые очень мало связаны друг с другом и должны отображаться рядом.Таким образом, я хочу настроить приложение так, чтобы каждый основной компонент запрашивал хранилище 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?