React：オブジェクト小道具のデフォルトプロパティをどのように割り当てるのですか？

Question

たとえば、子コンポーネントにはposition={{x: 50}}が渡されます。子コンポーネント内にthis.props.positionを再割り当てする方法{{x: 50, y: 0}}

Answer 1

Reactを使用しているようです。あなたはまた、ES2016を使用している場合は、Object.assignを使用することができます：

var initial = {x: 0, y: 0}; 
var passed = {x: 50}; 

var result = Object.assign({}, initial, passed); 

console.log(result); // { x: 50, y: 0 } 

Answer 2

あなただけthis.props.positionをした場合、デフォルトの小道具は文句を言わないで不足している特定のプロパティをチェックするので、あなたが動作するように、デフォルトの小道具に頼ることができませんでしたオブジェクトは存在しますが、小道具がまったく存在するかどうかを確認します。 1がデフォルトにフォールバックすることができ、他のを渡されたとされていない場合は、両方のデフォルトの小道具をように設定することができ、あなたの子コンポーネントにpositionX &位置j

その後

：

最も簡単な方法は、二つの小道具を持っているだろうもう一方は

getDefaultProps: function() { 
    return { 
    positionX: 50, 
    positionY: 0 
    }; 
}, 

別のオプションは、そのは、子コンポーネントにで使用されている場所に存在し、YとX値の両方を持つ新しいオブジェクトとその時点でそれを操作するかどうかを確認することです。オブジェクトの非構造と

例：var {x, y=50} = this.props.position

あなたはyが、あなたはまた、デフォルトの値xを与えることができますに渡されるようxは未定義かもしれないと予想される場合

。 this.props.positionにxまたはyがある場合、デフォルト値を上書きします