2017-03-07 67 views
0

我碰到这行代码走到今天,而学习阵营:这是什么意思分配给JavaScript中的{...}对象?

import React, {Component, PropTypes } from 'react'; 

class App extends Component { 

    static propTypes = { 
     transactions: PropTypes.array, 
     summary: PropTypes.object, 
     gridFields: PropTypes.array, 
     actions: PropTypes.object 
    }; 
    componentWillMount() { 
     const { transactions, actions } = this.props; 
     actions.requestSum(transactions); 
    } 

    render() { 
     const { 
      transactions, 
      gridFields, 
      summary, 
      actions 
     } = this.props; 

     return (
      <div className="viewport"> 
      <Header addTodo={actions.addTodo} /> 
      <Grid fields={gridFields} data={transactions}> 
       <TransactionForm action={actions.addTransaction}/> 
       <TransactionSummary data={summary} fields={gridFields} /> 
      </Grid> 
      </div> 
     ); 
     } 
    } 

} 

但什么是const {transactions, actions} = this.props是什么意思?我习惯了这样的事情:

const myVariable = 3; 

React如何知道在交易和操作中存储什么?

+1

谷歌 “的JavaScript解构” – gyre

+0

这是[对象解构](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring)来自ES6。 – 4castle

回答

1

这个解构声明

const {transactions, actions} = this.props; 

意味着类似如下:

const transactions = this.props.transactions, 
     actions = this.props.actions; 

更多解构理解头部到这里:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

+0

如果您要回答已经被问及几十次回答的问题,请尝试通过提供规范,示例或文档的链接来添加一些值。但实际上投票结束为重复是可取的。 – 2017-03-07 01:52:56

+0

+1谢谢@Rikin至少在结束这个问题之前告诉我这是什么名字。至少我现在可以正确地谷歌它。很高兴有一些人希望能够帮助他们,而不是全力以赴。 Sheeh。 – user3685285