javascript - 如何从 defaultProps 迁移到默认参数

Question

我有一个 Loader 组件，它与 defaultProps 一起按预期工作:

const Loader = ({ inner, outer, ...rest }) => {
  return (
    <svg fill="none" viewBox="0 0 200 152" {...rest}>
      <path
        fill="none"
        id={inner.id}
        stroke={inner.color}
        d="M99.217 100.606L58.302 29.74h81.829l-40.914 70.866z"
      />
      <path
        fill="none"
        id={outer.id}
        stroke={outer.color}
        d="M100 151L13.398 1h173.205L100 151z"
      />
    </svg>
  );
};

Loader.defaultProps = {
  id: 'loader',
  inner: {
    id: 'inner',
    color: 'black'
  },
  outer: {
    id: 'outer',
    color: 'black'
  }
};

ReactDOM.render(<Loader />, document.getElementById('root'));

<div id="root">

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

我想迁移它以使用 Default Parameters同时spreading预定义的 defaultProps，但我无法弄明白:

const defaultProps = {
  id: 'loader',
  inner: {
    id: 'inner',
    color: 'black'
  },
  outer: {
    id: 'outer',
    color: 'black'
  }
};

// Not working, runtime exception - `id is undefined`
const Loader = ({ inner, outer, ...rest } = defaultProps) => {
  return ...
};

// works, but id is still undefined
const Loader = ({
  inner = defaultProps.inner,
  outer = defaultProps.outer,
  ...rest
}) => { return {...}; }

包含上述所有示例的沙盒:

Answer 1

如果您希望最外层的 id 位于 rest 中，我认为您做不到(因为您无法为 rest 目标定义默认值)。但是，如果您接受最外层的 id 作为命名的解构参数，您可以通过在函数签名中的解构中指定默认值，并将空白默认值分配给参数作为 its 默认:

const Loader = ({
         id = 'loader',       //
         inner = {            //
             id: 'inner',     //
             color: 'black'   //
         },                   // Various defaults for the destructuring
         outer = {            //
           id: 'outer',       //
           color: 'black'     //
         },                   //
         ...rest
    } = {}
//   ^^^^^---- default for the parameter itself
) => {
        // ...
};

(不过，格式化真的很痛苦。:-))

实例:

const Loader = ({
         id = 'loader',
         inner = {
             id: 'inner',
             color: 'black'
         },
         outer = {
           id: 'outer',
           color: 'black'
         },
         ...rest
    } = {}
) => {
  return (
    <svg fill="none" viewBox="0 0 200 152" {...rest}>
      <path
        fill="none"
        id={inner.id}
        stroke={inner.color}
        d="M99.217 100.606L58.302 29.74h81.829l-40.914 70.866z"
      />
      <path
        fill="none"
        id={outer.id}
        stroke={outer.color}
        d="M100 151L13.398 1h173.205L100 151z"
      />
    </svg>
  );
};

ReactDOM.render(<Loader />, document.getElementById('root'));

<div id="root">

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.production.min.js"></script>