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

Question

I'm trying to figure out how the code below works in terms of the { active, children, onClick } . What are the curly braces doing here? I would have expected instead const Link = (props) => , where the values are accessed in the function using props.active etc. This is what I am doing in my CommentBox example below.

Link:

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:

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

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 }) => { ... });

What this is doing is destructuring the first argument. Assuming your first argument is an object with at least active , children and onClick properties, it directly maps them into variables of the same name.

You can see it in action here .

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