如何将类型分配给道具？答案

【问题标题】：How to assign a Type to a prop?如何将类型分配给道具？
【发布时间】：2021-08-27 22:41:25
【问题描述】：

我有一个父组件：

// DashboardComponent.tsx

const DashboardComponent = () => {
  const {loading, error, data} = useQuery(resolvers.ReturnAllMovies);

  if (loading) return <p>loading</p>;
  if (error) return <p>Error! ${error.message}</p>;

  const movies: IMovie[] = data.movies;

  return (
    <React.Fragment>
      <DashboardMovieOverviewMenu />
      { movies.length > 0 ? <MovieOverview movies={movies} /> : null }
    </React.Fragment>
  );
};

还有一个子组件：

// MovieOverview.tsx

const MovieOverview = (props: IMovie[]) => {
  const movies = props;

  ...
}

在父组件中，我将 const 电影声明为 IMovie 类型，它是一个数组：

在子组件中，我将 prop 声明为 IMovie 和数组类型：

但是父组件显示错误：

键入'{电影：IMovie[]; }' 缺少来自类型 'Pick' 的以下属性：[Symbol.iterator]、[Symbol.unscopables]、map、filter 等 26 个。

【问题讨论】：

标签： reactjs typescript

【解决方案1】：

当您执行(props: IMovie[]) 时，您实际上是在说整个道具对象是一个IMovies 数组。为了输入一个道具，有几种不同的方法，这里有两种：

const MovieOverview = (props: {movie:IMovie[]}) => {

interface Props {
    movies: IMovie[]
}
    
const MovieOverview = (props: Props) => { 
    const movies = props;
    ...
}

【讨论】：

【解决方案2】：

传递给功能组件的参数是一个对象，其中包含对应于道具名称的键，以及它们对应的值。电影数组不是props 参数，而是嵌套在props.movies 中。

这个

const movies = props;

需要

const { movies } = props;

或

const movies = props.movies

或使用

const MovieOverview = ({ movies }) => {

【讨论】：

有道理，谢谢。您的建议有效，但问题仍然是 const MovieOverview = 中的道具类型仍然是 any。