正在将变量追加到类型中的属性

Question

是否有方法将变量附加到Type的现有属性
我需要用poster_path道具附加IMGPATH变量，以获得图像的正确url，但由于我需要正确定义属性，我不确定如何执行此操作。

在我的电影组件中没有错误，但当我在App.tsx中渲染它时，我会得到一个错误：

Type '{ key: any; src: any; title: any; overview: any; vote_average: any; }' is not assignable to type 'IntrinsicAttributes & MovieType'.
Property 'src' does not exist on type 'IntrinsicAttributes & MovieType'

有没有更好的方法来解决这个问题？

这是应用程序组件

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import Movie from './components/Movie';
const APIURL =
'https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=04c35731a5ee918f014970082a0088b1&page=1';
export default function App() {
const [movies, setMovies] = useState<any[]>([]);
useEffect(() => {
const fetchData = async () => {
const result = await axios(APIURL);
setMovies(result.data.results);
};
fetchData();
}, []);
return (
<div>
{movies.map((movie) => (
<Movie
key={movie.id}
src={movie.poster_path}
title={movie.title}
overview={movie.overview}
vote_average={movie.vote_average}
/>
))}
</div>
);
}

这是我的电影组件

import React from 'react';
const IMGPATH = 'https://image.tmdb.org/t/p/w1280';
type MovieType = {
id?: string;
title: string;
overview: string;
poster_path: string;
vote_average: number;
};
const Movie = ({ id, title, overview, vote_average, poster_path }: MovieType) => {
return (
<div key={id}>
<img src={IMGPATH + poster_path} alt={title} />
<div>{title}</div>
<div>{overview}</div>
<div>{vote_average}</div>
</div>
);
};
export default Movie;

谢谢！

Answer 1

在您的代码中，您正在将这些道具传递给电影

<Movie
key={movie.id}
src={movie.poster_path}
title={movie.title}
overview={movie.overview}
vote_average={movie.vote_average}
/>

但是你的电影组件的签名是MovieType，所以src道具应该添加到MovieType 中

type MovieType = {
id?: string;
src: string;
title: string;
overview: string;
poster_path: string;
vote_average: number;
};

或从外部移除

<Movie
key={movie.id}
title={movie.title}
overview={movie.overview}
vote_average={movie.vote_average}
/>