割り当て{} this.props

Question

render() { 
    const { type, id = this.id, className, 
    value = this.state.value, required, ...otherProps } = this.props; 
    return (
     <input 
     id={id} 
     name={id} 
     className={className} 
     required={required} 
     aria-required={required} 
     type={type} 
     value={value} 
     onChange={this.handleChange} 
     {...otherProps} 
     /> 
    ); 
    } 

から値を代入しようとすると、私は「this.id」と「this.stateする「ID」と「値」CONST変数を代入しようとして動作していません。値はそれぞれ割り当てられていませんが、代わりにthis.propsから渡された値から値が割り当てられています。

私はcomponentWillMount（）とhandleChange（）関数が 'this.id'と 'thisに割り当てられるいくつかの新しい値を計算するために' pros.id 'と' props.value 'を使うユースケースです.state.value 'です。したがって、上記のコードでは、それぞれ 'this.id'と 'this.state.vale'からそれぞれ取得する 'id'と 'value'が必要でした。

Answer 1

=デフォルト値の割り当てを意味しています。例えば：あなたのケースでは

const { key1 = 1, key2 = 2 } = { key1: 0 }; 
console.log(key1); // 0 
console.log(key2); // 2 

あなたは、変数を初期化するために個別に各オブジェクトをdestructureことができます。

const { type, className, required, ...otherProps } = this.props; 
const { id } = this; 
const { value } = this.state; 

あなたはotherPropsからidとvalueを省略したい場合は、別の名前でそれをdestructureすることができます。たとえば、私は名前_idと_valueを持つ変数に割り当てます。

const { 
    type, className, required, 
    id: _id, value: _value, // eslint-disable-line no-unused-vars 
    ...otherProps 
} = this.props; 
const { id } = this; 
const { value } = this.state; 

Answer 2

this.propsを変数に分解しています。使用した構文はthis.props.idが存在しない場合にthis.idをidに割り当てます。構造化に=を使用するのは、値が構造化されていないオブジェクトに存在しない場合にデフォルト値を提供するためです（この例では、は、this.props.idが存在しない場合にのみidに割り当てられます）。

オブジェクトの非構造化コールからidを削除する必要があります。あなたが小道具からidを使用するための代替オプションを提供したいなら、あなたは可能性がこれに：（値が非構造れるオブジェクトのキーのために提供されていない場合）、非構造における

const id = this.id || this.props.id; 

Answer 3

あなたは:は、プロパティ名と割り当て対象を分離し、=はデフォルト初期化子で使用されて

const {type, id: this.id, className, value: this.state.value, required, ...otherProps} = this.props; 
//   ^      ^

を探しているように見えます。あなたの構文はidプロパティがthis.propsにないときにthis.idから値をとり、id変数に割り当てました。