Question

我们说我在React中有以下组件

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

    );
};

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

<SpecializedTextField validate={[isRequired]} />

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

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

Answer 1

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

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

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

    );
};

当然，假设您在isNumber道具中未获得isPositive或validate，或者重复出现问题并非如此。如果没有给出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而不是其中的可变数量......这太糟糕了......）

说到微优化，它似乎是spread is currently much slower than concat，所以

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

可能更好地写成

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

Answer 2

除了@ T.J。克劳德的回答是，你不需要破坏道具来提取validate和other。 validate prop具有相同的名称，并且由于jsx中的属性顺序而被覆盖：

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

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

使用专用组件中的数组值将项添加到属性

2 个答案: