2017-03-07 8 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

Googleの "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

すでに尋ねられて何十回も答えられている質問に答える場合は、仕様、サンプル、またはドキュメントへのリンクを提供して価値を追加してみてください。しかし、実際には重複して投票することが望ましいです。 –

+0

+1この質問を閉じる前に、少なくともこの物の名前が何であるか教えてくれてありがとう@Rikin。少なくとも私は今それを適切にGoogleにすることができます。嬉しいのは、上司を代行するのではなく、助けてほしい人がいることです。 Sheeh。 – user3685285

関連する問題