は、特殊な部品で配列値を持つプロパティに項目を追加

Question

のは、私が

const SpecializedTextField= props => { 
    return (
     <TextField 
      {...props} 
      validate={[isNumber, isPositiveNumber]} 
     /> 

    ); 
}; 

を反応させて、私は検証プロップに別の検証を追加するには、次のコンポーネントがあるとしましょう：

<SpecializedTextField validate={[isRequired]} />

を

それはTextFieldにバリデーションを追加するので、結果はvalidate={[isRequired, isNumber, isPositiveNumber]}

もちろん私はboそれらをマージします。しかし、es6/reactに2つのプロパティを一緒に追加するクリーンな方法（構文的な砂糖のいくつかの並べ替え）がありますか？

Answer 1

もちろん、私は両方の配列を取り出してマージすることができます。ほとんどあなたがする必要があるものだが、それはスプレッド表記でかなり簡潔だ

：もちろん

const SpecializedTextField= props => { 
    const {validate = [], ...other} = props; 
    return (
     <TextField 
      {...other} 
      validate={[isNumber, isPositiveNumber, ...validate]} 
     /> 

    ); 
}; 

、どちらかあなたがvalidate小道具にisNumberまたはisPositiveを取得しないことを前提とし、または重複していることは問題ではありません。また、validate propが指定されていない場合は、空の配列を作成してスプレッドします。

これらの前提条件が無効である場合や、ブランクアレイを作成して広げることで迷惑をかける場合（マイクロ選択であろうとなかろうと）、自分でやるか、Set 。おそらく：

const specializedTextFieldValidations = [isNumber, isPositiveNumber]; 
const SpecializedTextField = props => { 
    let {validate = specializedTextFieldValidations, ...other} = props; 
    if (validate !== specializedTextFieldValidations) { 
     validate = [...new Set([...specializedTextFieldValidations, ...validate]).values()]; 
    } 
    return (
     <TextField {...other} validate={validate} /> 
    ); 
}; 

マイクロ最適化の

いえば（それは... Setコンストラクタのみ単一Iterableではなく、それらの可変数を受け入れる残念だ）、それはように思われますspread is currently much slower than concat、そう

validate = [...new Set([...specializedTextFieldValidations, ...validate]).values()]; 

は良好

のように書くことができます。

validate = [...new Set(specializedTextFieldValidations.concat(validate)).values()]; 

Answer 2

@ T.J。 Crowderの答えは、validateとotherを抽出するために小道具を分解する必要はありません。 validate小道具は、同じ名前を持ち、JSX順番を属性によるオーバーライドされます。

const SpecializedTextField= props => { 
    return (
     <TextField 
      {...props} 
      validate={[...props.validate, isNumber, isPositiveNumber]} 
     /> 
    ); 
}; 

SpecializedTextField.defaultProps = { 
    validate: [], 
};