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

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

过滤器链接:

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

评论框:

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 .

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