时间戳

首页 > 解决方案 > 在道具中传递对象，使用打字稿的reactjs

reactjs - 在道具中传递对象，使用打字稿的reactjs

问题描述

我从 ReactJS 开始，我决定使用 typescript 制作我的项目。这是一个从 API 获取电影并显示它的应用程序。

这是应用程序：

import React from 'react';
import '../../assets/css/App.css';
import { Thumb } from '../../components/Thumb';


interface State {
  isLoaded: boolean;
  items: any[];
  error: string;
}
class App extends React.Component<{}, State> {

  state: Readonly<State> = {
    isLoaded: false,
    items: [],
    error: ''
  }

  renderThumbsContainer() {

    const movies = [
      {title: 'Terminator', original_title: 'Terminator', original_language: 'EN', overview: 'A killer robot from future blablabla...', poster_path:'/terminator.jpg'}
    ];

    const thumbs = movies.map((movie, index) => {
      return (
        <Thumb 
          key={index}
          movie={movie}
        />
      );
    });
    return (<div>{thumbs}</div>)
  }

  render() {

    return (
      <div className="App">
        <header className="App-header">
          <h1>Movies</h1>
        </header>
        <main>
          {this.renderThumbsContainer()}
        </main>
      </div>
    );
  }

}

export default App;

以及显示电影详细信息的组件：

import React from 'react';

export function Thumb({ movie: props }: any) {
    return (
        <div className="thumb">
            <div>{props.title}</div>
            <div>{props.original_title}</div>
            <div>{props.original_language}</div>
            <div>{props.overview}</div>
            <div>{props.poster_path}</div>
        </div>
    );
}

花了 2 个小时解决通过 props 传递对象的问题后，我终于在 Thumb 组件函数中使用了这个参数

拇指（{电影：道具}：任何）

我认为 props 参数 so Thumb(props: any) 应该足够了，但是没有显示的数据，我终于想出了这个，但我只是不明白它是如何工作的。首先我展示了电影。在 div 中，仍然没有工作，然后它使用道具工作。

我对打字稿缺乏了解，对我来说，我声明了一个 any 类型的对象，其中包含 props 类型的电影属性作为参数，但这没有任何意义。

所以我想了解这一点，我是否将来自父母的电影属性绑定到道具或其他东西？请解释。

标签： reactjstypescript

解决方案

您可以将 JSX<Thumb key={index} movie={movie}/>视为函数调用Thumb(props)where的语法糖props={key: index, movie: movie}。JSX 元素中提供的所有道具都表示为props传递给组件的对象上的键和值。

当你这样做时function Thumb({ movie: props })，你正在解构props参数，本质上只movie从现在解构的props参数中获取键并将其重命名为“props”。

我想你可以试试这样的东西

import React from 'react';

interface ThumbProps {
  key: number;
  movie: {
    title: string;
    original_title: string;
    // etc...
    }
}

export function Thumb({ movie }: ThumbProps) {
    return (
        <div className="thumb">
            <div>{movie.title}</div>
            <div>{movie.original_title}</div>
            <div>{movie.original_language}</div>
            <div>{movie.overview}</div>
            <div>{movie.poster_path}</div>
        </div>
    );
}

注意：function Thumb({ movie }: ThumbProps)现在意味着 Typescript 将期望解构movie的属性是接口 ThumbProps 定义的类型。

推荐阅读