时间戳

首页 > 解决方案 > 由于条件渲染中的道具导致打字稿错误

reactjs - 由于条件渲染中的道具导致打字稿错误

问题描述

有一个带有组件返回的简单条件语句：

let content = movies.length > 0 ? movies.map((movie, i) => <MovieCard key={i} movie={movie} />) : null;

打字稿在“电影”道具上显示错误：

TS2322: Type '{ key: number; movie: object; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; }'.
        Property 'movie' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; }'.

import React from "react";
import { Link } from 'react-router-dom';


const MovieCard: React.FC = ({ movie }) => {

    return (
        <div className="col-md-3 mb-5">
            <div className="card card-body bg-dark text-center h-100">
                <img className="w-100 mb-2" src={movie.Poster} alt="Movie Cover" />
                <h5 className="text-light card-title">
                    {movie.Title} - {movie.Year}
                </h5>
                <Link className="btn btn-primary" to={'/movie/' + movie.imdbID}>
                    Movie Details
                    <i className="fas fa-chevron-right" />
                </Link>
            </div>
        </div>
    );
};

export default MovieCard;

请帮助理解我错过了什么。我是 TS 的新手。

标签： reactjstypescript

解决方案

您需要为 MovieCard 功能组件定义道具类型。


import React from "react";
import { Link } from 'react-router-dom';

export interface Movie {
  imdbID: number,
  Title: string,
  Year: string
}

export interface Props {
   movie: Movie
}

const MovieCard: React.FC<Props> = ({ movie }) => {

    return (
        <div className="col-md-3 mb-5">
            <div className="card card-body bg-dark text-center h-100">
                <img className="w-100 mb-2" src={movie.Poster} alt="Movie Cover" />
                <h5 className="text-light card-title">
                    {movie.Title} - {movie.Year}
                </h5>
                <Link className="btn btn-primary" to={'/movie/' + movie.imdbID}>
                    Movie Details
                    <i className="fas fa-chevron-right" />
                </Link>
            </div>
        </div>
    );
};

export default MovieCard;

您可以查看此备忘单以获取 react- typescript

推荐阅读