使用专用组件中的数组值将项添加到属性(Add item to property with an array value in specialized component)

使用专用组件中的数组值将项添加到属性(Add item to property with an array value in specialized component)

假设我在React中有以下组件

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

我想为验证道具添加另一个验证：

<SpecializedTextField validate={[isRequired]} />

这会将验证添加到TextField，因此会导致validate={[isRequired, isNumber, isPositiveNumber]}

当然，我可以检索两个数组并合并它们。 但是有没有一种干净的方法（某种语法糖）在es6 / react中将两个属性一起追加？

Let's say I have the following component in React

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

And I want to add another validation to the validate prop:

<SpecializedTextField validate={[isRequired]} />

That would add the validation to the TextField so it would result in validate={[isRequired, isNumber, isPositiveNumber]}

Of course i could just retrieve both arrays and merge them. But is there a clean way (some sort of syntactic sugar) to append the two properties together in es6/react?

最满意答案

当然，我可以检索两个数组并合并它们。

这几乎就是你需要做的事情，但它与传播符号非常简洁：

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

当然，假设要么你不会在validate道具中获得isNumber或isPositive ，或者有重复项不是问题。 如果没有给出validate支持，它还会创建并传播空白数组。

如果这些假设无效和/或创建和传播空白数组困扰你（我会，微观选择或不选择），你需要建立一个独特的集合，你可以自己或通过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而不是可变数量的它们 太糟糕了 ......）

说到微优化，看起来传播目前比concat慢得多 ，所以

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

可能会写得更好

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

Of course i could just retrieve both arrays and merge them.

That's pretty much what you need to do, but it's pretty concise with spread notation:

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

Of course, that assumes that either you won't get isNumber or isPositive in the validate prop, or that having duplicates isn't a problem. It also creates and spreads a blank array if there's no validate prop given.

If those assumptions are invalid and/or creating and spreading the blank array bothers you (it would me, micro-opt or not), you'll need to build a unique set, which you could do yourself or via Set. Perhaps:

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} /> ); };

(It's too bad the Set constructor only accepts a single Iterable rather than a variable number of them...)

Speaking of micro-optimization, it would appear that spread is currently much slower than concat, so

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

may be better written as

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