Не удается передать свойства в компонент. React/TypeScript

Question

Делаю учебный проект - приложение погоды на React/TypeScript. При компиляции получаю следующую ошибку:

"Type '{ dt: number; temp: string; icon: string; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; }'. Property 'dt' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; }'. TS2322"

Мой компонент:

import React, { FunctionComponent } from 'react'

const WeatherCard: FunctionComponent = ({ dt, temp, icon }:any) => {
  const date = new Date(dt)
  return (
    <div>
        <img src={ `http://openweathermap.org/img/wn/${icon}@2x.png` } />
        <p>{temp}</p>
        <p>{date}</p>
    </div>
  )
}

export default WeatherCard

А код App.tsx выглядит так:

// eslint-disable-next-line no-use-before-define
import React from 'react'
import './App.css'
import WeatherCard from './components/WeatherCard'

function App () {
  return (
    <div className="App">
      <WeatherCard dt={1602104400} temp='24' icon='01d' />
    </div>
  )
}

export default App

Гугление не очень помогло, либо мой навык поиска и чтения ответов на английском оставляет желать лучшего.

Answer 1

В общем проблема заключается в том, что нужно описать тип для props и указывать его.

// eslint-disable-next-line no-use-before-define
import React from 'react'

interface WeatherCardProps {
  dt: number,
  temp: string,
  icon: string,
}

const WeatherCard = (props : WeatherCardProps) => {
  const date = new Date(props.dt)
  return (
    <div>
        <img src={ `http://openweathermap.org/img/wn/${props.icon}@2x.png` } />
        <p>{props.temp}</p>
        <p>{date.toString()}</p>
    </div>
  )
}

export default WeatherCard

А так же ВНИМАНИЕ: приводите все типы самостоятельно, потому что я получил еще ошибку:

Error: Objects are not valid as a React child (found: Thu Oct 08 2020 01:00:00 GMT+0400 (Самарское стандартное время)). If you meant to render a collection of children, use an array instead.

Приведя date к строке я решил и эту проблему.

БЛОГ НА HUSL

Не удается передать свойства в компонент. React/TypeScript

Ответы (1 шт):