React,为什么{}在将props传递给无状态功能组件时?

mal*_*ers 5 destructuring ecmascript-6 reactjs

我的感觉是({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;
Run Code Online (Sandbox Code Playgroud)

nra*_*itz 11

你是对的.在ES6语法中,函数签名

const CourseListRow = ({course}) => { ... }
Run Code Online (Sandbox Code Playgroud)

与ES5代码相同

var CourseListRow = function(props) {
    var course = props.course;
    ...
}
Run Code Online (Sandbox Code Playgroud)

这称为解构.