时间戳

首页 > 解决方案 > 解构参数对象，但让它在主体函数中可用？

javascript - 解构参数对象，但让它在主体函数中可用？

问题描述

我有这个功能，例如：

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

但是，哦不，我仍然需要第二行的原始对象！有没有办法解构一个对象，但仍然保留它在函数体中可用？

标签： javascriptfunctionecmascript-6

解决方案

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

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

有一个非常hacky的解决方案可以让您保持简洁的主体，即使用第二个参数，该参数不传递给函数，默认为 destructured props：

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

但这很混乱，我不建议这样做。

推荐阅读