React，为什么在将道具传递给无状态功能组件时使用 {}？

Question

我的感觉是 ({course}) 语法正在从 props 对象中提取属性 'course'。从而使组件内对 'course' 属性的调用更加简洁。如果我使用 (props) 语法传递道具，而不是 ({course})。例如，我将不得不说 'props.course.authorId'。

我的思路对吗？如果您能详细说明这里发生的事情并填补任何空白，那就太好了。

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;

Answer 1

你是对的。在 ES6 语法中，函数签名

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

与ES5代码相同

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

这叫做destructuring。

React，为什么在将道具传递给无状态功能组件时使用 {}？

React, Why the {} when passing props to stateless functional component?

destructuring

ecmascript-6

reactjs