Блог

Я начинаю с 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 so Thumb(props: any) должно быть достаточно, но данные не отображаются, и я, наконец, придумал это, но я просто не понимаю, как это работает. Сначала я отобразил фильм. в divs все еще не работало, а затем оно работало с использованием props.

Мне не хватает знаний в typescript, для меня я объявил объект типа any, содержащий атрибут movie типа props в качестве параметра, но это не имеет смысла.

Итак, я хотел бы понять это, я привязал атрибут movie, исходящий от родителя, к реквизиту или что-то в этом роде? Пожалуйста, объясните.

Вы можете видеть 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 будет ожидать, что свойство destructured movie будет иметь тип, определенный в интерфейсе ThumbProps`.