取消构造参数对象，但在body函数中保留它

Question

我有这个函数，例如：

const FieldRange = props => (
<div className={b('field-range', props)}>
{props.children}
{!!props.errorFieldName && <Field name={props.errorFieldName}/>}
</div>
);

最终，我决定让它更干燥，并像那样重写，将自变量对象重组为属性：

const FieldRange = ({ children, errorFieldName }) => (
<div className={b('field-range', props)}>
{children}
{!!errorFieldName && <Field name={errorFieldName}/>}
</div>
);

但是，哦，不，我仍然需要第二行的原始对象！有没有一种方法可以破坏一个对象，但仍然让它在函数体中可用？

Answer 1

IMO，最好的方法是保持原始代码不变，或者在函数的第一行声明变量：

const FieldRange = props => {
const { children, errorFieldName } = props;
return (
<div className={b('field-range', props)}>
{props.children}
{!!errorFieldName && <Field name={errorFieldName}/>}
</div>
);
);

有一个非常巧妙的解决方案可以让你保持简洁的正文，那就是使用第二个参数，不会将其传递给函数，该函数默认为destructuredprops:

const FieldRange = (props, { children, errorFieldName } = props) => {

但这很令人困惑，我不推荐它。

Answer 2

您可能会滥用第二个参数进行破坏，默认值为props。

const FieldRange = (props, { children, errorFieldName } = props) => (
<div className={b('field-range', props)}>
{children}
{!!errorFieldName && <Field name={errorFieldName}/>}
</div>
);