Реагируйте, почему {} при передаче реквизитов в апатридный функциональный компонент?


Мне кажется, что синтаксис ({course}) извлекает свойство 'course' из объекта props. Тем самым делая вызовы свойств "курса" внутри компонента более краткими. Если я передал props, используя синтаксис (props), вместо ({course}). Тогда мне пришлось бы сказать: "реквизит.курс.номер, например.

Верна ли моя линия мышления? Было бы здорово, если бы вы могли подробно рассказать о том, что здесь происходит, и заполнить любые пробелы.

import React, {PropTypes} from 'react';
import {Link} from 'react-router';

const CourseListRow = ({course}) => {
  return (
    <tr>
      <td><a href={course.watchHref} target="_blank">Watch</a></td>
      <td><Link to={'/course' + course.id}>{course.title}</Link></td>
      <td>{course.authorId}</td>
      <td>{course.category}</td>
      <td>{course.length}</td>
    </tr>
  );
};

CourseListRow.propTypes = {
  course: PropTypes.object.isRequired
};

export default CourseListRow;
1 5

1 ответ:

Вы правы. В синтаксисе ES6 сигнатура функции

const CourseListRow = ({course}) => { ... }

Совпадает с кодом ES5

var CourseListRow = function(props) {
    var course = props.course;
    ...
}

Это называется деструктурированием.