0 
import React, { Component, PropTypes } from 'react'
import { reduxForm } from 'redux-form'
export const fields = [ 'firstName', 'lastName', 'email', 'sex', 'favoriteColor', 'employed', 'notes' ]

class SimpleForm extends Component {
  render() {
    const {
      fields: { firstName, lastName, email, sex, favoriteColor, employed, notes },
      handleSubmit,
      resetForm,
      submitting
      } = this.props
    return (<form onSubmit={handleSubmit}>
        <div>
          <label>First Name</label>
          <div>
            <input type="text" placeholder="First Name" {...firstName}/>
          </div>
        </div>
        <div>
          <label>Last Name</label>
          <div>
            <input type="text" placeholder="Last Name" {...lastName}/>
          </div>
        </div>
        <div>

これはパッケージのSimple Form例です。redux-form変数がどこから来たのか、私は困惑していますfirstName。ES6 構文に欠けているものはありますか?

4

2 に答える 2

4

見逃しているかもしれない ES6 の概念は、「オブジェクトの割り当ての破壊」と呼ばれます。

この割り当て:

const {
  fields: { firstName, lastName, email, sex, favoriteColor, employed, notes },
  handleSubmit,
  resetForm,
  submitting
  } = this.props

this.props形をしていることを意味する

{ fields: { firstName: "...", 
            lastName: "...", 
            email: "...", 
            sex: "...", 
            favoriteColor: "...", 
            employed: "...", 
            notes: "..."
          },
  handleSubmit: "...",
  resetForm: "...",
  submitting: "..."
}

「...」は、文字列だけでなく、任意のデータ型 (オブジェクトと配列を含む) を表します。また、オブジェクトにはそれ以上の情報が含まれている場合もあります。

代入を分解すると、オブジェクト構造に深く到達し、そのオブジェクトの要素に名前を割り当てることができます。私たちの場合、上でスケッチした「...」の各値は、変数に直接割り当てられます。これらの変数は、後で単独で使用できます。そこfirstNameから来ています。

次に、コードは「オブジェクト拡散演算子」と呼ばれる別の新しい ES6 のものを適用します。渡す{...firstName}ことで、オブジェクトを分割し、firstNameその各プロパティを React コンポーネントに個別に渡すことができます。たとえば、firstName次のようになります。

{ a: "...", b: "...", c: "..." }

それから

<MyComponent {...firstName} />

と同等です

<MyComponent a={firstName.a} b={firstName.b} c={firstName.c} />
于 2016-04-12T22:22:37.587 に答える