2016-06-17 7 views
4

私の気持ちは、({コース})構文がpropsオブジェクトからプロパティ「コース」を抽出しているということです。これにより、コンポーネント内の「コース」プロパティへの呼び出しがより簡潔になります。私が(小道具)構文を使って小道具を渡した場合、({コース})の代わりに。私は、例えば、「props.course.authorId」と言わなければなりません。React、ステートレス機能コンポーネントに小道具を渡すときに{}を使用する理由は?

私の考え方は正しいですか?ここで起こっていることを正確に展開してギャップを埋めることができれば素晴らしいことでしょう。

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; 

答えて

10

あなたは正しいです。 ES6構文では、関数シグネチャ

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

これはdestructuring呼ばれる

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

ES5コードと同じです。

関連する問題