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

【问题标题】：React, Why the {} when passing props to stateless functional component?React，为什么在将道具传递给无状态功能组件时使用 {}？
【发布时间】：2016-10-19 14:19:32
【问题描述】：

我的感觉是 ({course}) 语法是从 props 对象中提取属性“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;

【问题讨论】：

标签： reactjs ecmascript-6 destructuring

【解决方案1】：

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

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

和ES5代码一样

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

这叫destructuring。

【讨论】：