假设我在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()];更多推荐
发布评论