การส่งผ่านอ็อบเจ็กต์ใน props, ReactJS กับ TypeScript

ฉันเริ่มต้นเรียนรู้ 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

Thumb({ movie: props }: any)

ผมคิดว่าพารามิเตอร์ props ของ Thumb(props: any) น่าจะเพียงพอแล้ว แต่ข้อมูลกลับไม่ถูกแสดงผล และสุดท้ายผมก็คิดวิธีนี้ออก แต่ผมก็ยังไม่เข้าใจว่ามันทำงานอย่างไร ก่อนหน้านี้ผมแสดง movie. ใน divs แต่ก็ยังใช้ไม่ได้ และจากนั้นมันก็ใช้ได้เมื่อใช้ props

ฉันขาดความรู้ใน TypeScript สำหรับฉัน ฉันประกาศอ็อบเจ็กต์ประเภท any ที่มีแอตทริบิวต์ movie เป็นประเภท props เป็นพารามิเตอร์ แต่สิ่งนี้ก็ไม่มีความหมาย

ดังนั้นฉันอยากเข้าใจเรื่องนี้ ฉันได้ผูก attribute ของหนังที่มาจาก parent เข้ากับ props หรืออะไรแบบนั้นหรือเปล่า? ช่วยอธิบายหน่อย

คำตอบ #1

คุณสามารถมอง JSX <Thumb key={index} movie={movie}/> เป็นเหมือนน้ำตาลทางไวยากรณ์สำหรับการเรียกฟังก์ชัน Thumb(props) โดยที่ props={key: index, movie: movie} ทุก props ที่คุณให้ในองค์ประกอบ JSX จะถูกแทนค่าเป็นกุญแจและค่าบนวัตถุ props ที่ส่งไปยังคอมโพเนนต์ของคุณ

เมื่อคุณทำ function Thumb({ movie: props }) คุณกำลังทำการ destructuring อาร์กิวเมนต์ props โดยพื้นฐานแล้วคุณกำลังนำเฉพาะคีย์ movie จากอาร์กิวเมนต์ props ที่ถูก destructured แล้วมา และ เปลี่ยนชื่อมัน เป็น "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`