在无状态组件上添加默认道具

Posted 2021-05-07

也许这是一个愚蠢的问题，但我不明白为什么我不能在像这样的无状态组件上添加基于另一个prop的默认值：

const Link = ({
  children,
  target,
  rel = target === '_blank' && 'noopener noreferrer',
  href,
  ...attributtes
}) => (
  <a
    {...attributtes}
    target={target}
    rel={rel}
    href={href}
  >
    {children}
  </a>
);

Link.defaultProps = {
  children: <div />,
  target: null,
  rel: null,
};

Link.propTypes = {
  children: PropTypes.node,
  href: PropTypes.string.isRequired,
  target: PropTypes.string,
  rel: PropTypes.string,
};

export default Link;

答案

除非传递undefined，否则不使用默认参数值。这是一个简单的例子，说明这里发生了什么。

function test(a="foo", b="bar") {
  console.log(a, b);
}

test(undefined, null);
// prints "foo null"

要么从你的target中移除rel和defaultProps，要么将它们设置为undefined。

Link.defaultProps = {
  children: <div />,
  target: undefined,
  rel: undefined,
};

另一答案

您可以尝试将target传递给返回默认值的函数：

const Link = ({
    children,
    target,
    rel = getRel(target),
    href,
    ...attributtes
}) => (
    <a
        {...attributtes}
        target={target}
        rel={rel}
        href={href}
    >
        {children}
    </a>
);

Link.defaultProps = {
    children: <div />,
    target: null,
    rel: null,
};

Link.propTypes = {
    children: PropTypes.node,
    href: PropTypes.string.isRequired,
    target: PropTypes.string,
    rel: PropTypes.string,
};

const getRel = target => target === '_blank' && 'noopener noreferrer';

export default Link;

未经测试，所以不确定target是否会正确传递，但我知道你可以使用函数返回值作为默认参数值https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters。