純関数の署名に中括弧を使用する

Question

以下のコードが{ active, children, onClick }でどのように機能するかを調べようとしています。ここで中括弧は何をしていますか？私は代わりにconst Link = (props) =>を期待していました。ここで値はprops.activeなどを使って関数内でアクセスされています。これは私の下の私のCommentBoxの例で行っています。

リンク：

import React, { PropTypes } from 'react' 

const Link = ({ active, children, onClick }) => { 
    if (active) { 
    return <span>{children}</span> 
    } 

    return (
    <a href="#" 
     onClick={e => { 
     e.preventDefault() 
     onClick() 
     }} 
    > 
     {children} 
    </a> 
) 
} 

FilterLink：

http://redux.js.org/docs/basics/ExampleTodoList.html

CommentBox：

const CommentBox = (props) => 
     <div className="commentBox"> 
     <h1>Comments</h1> 
     { props.comments.valueSeq().map((comment) => 
       <Comment author={comment.author} key={comment.id}> 
       {comment.text} 
       </Comment> 
       )} 

     <CommentForm /> 
     </div> 

function mapStateToProps(state) { 
    return {comments: state.get('comments')}; 
} 

Answer 1

const Link = ({ active, children, onClick }) => { ... }); 

これは最初の引数を破壊することです。最初の引数が少なくともactive,childrenおよびonClickのプロパティを持つオブジェクトであると仮定すると、それらは同じ名前の変数に直接マップされます。

アクションhereで確認できます。