Javascript 花括号在纯函数签名中的应用

我试图从

{active，children，onClick}

的角度来理解下面的代码是如何工作的。这些花括号在这里干什么？相反，我希望

const Link=（props）=>

，在函数中使用props.active等访问值。这就是我在下面的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')};
}

const CommentBox=（道具）=>
评论
{props.comments.valueSeq（）.map（（comment）=>
{comment.text}
)}
函数MapStateTops（状态）{
返回{comments:state.get（'comments'）}；
}

这是在分解第一个参数。假设您的第一个参数是一个至少具有

活动属性

、

子属性

和

onClick属性的对象，它会直接将它们映射到同名变量中

你可以在行动中看到它

这是在分解第一个参数。假设您的第一个参数是一个至少具有
活动属性
、
子属性
和
onClick属性的对象，它会直接将它们映射到同名变量中

你可以在行动中看到它

Link=（{active，children，onClick}）=>{…
执行与
Link=（props）=>{var active=props.active，children=props.children，onClick=props.onClick；…}
相同的操作。
Link=（{active，children，onClick}）执行与
Link=（props）=>{var active=props.active，children=props.children，onClick=props.onClick；…}
-它被称为destructuring。我认为这个页面给出了一些很好的简单示例：我认为这个页面给出了一些很好的简单示例：
import { connect } from 'react-redux'
import { setVisibilityFilter } from '../actions'
import Link from '../components/Link'

const mapStateToProps = (state, ownProps) => {
  return {
    active: ownProps.filter === state.visibilityFilter
  }
}

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    onClick: () => {
      dispatch(setVisibilityFilter(ownProps.filter))
    }
  }
}

const FilterLink = connect(
  mapStateToProps,
  mapDispatchToProps
)(Link)

export default FilterLink

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')};
}

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

// ES6
function foo({bar, baz}, bam){
  console.log(bar, baz)
}

// ES5
"use strict";

function foo(_ref, bam) {
  var bar = _ref.bar;
  var baz = _ref.baz;

  console.log(bar, baz, bam);
}