为什么 React defaultProps 不传递值？

Question

import { memo } from 'react';
import classNames from 'classnames/bind';
import styles from './Button.module.scss';

const cn = classNames.bind(styles);

const Button = memo(
  ({ design: { size, color, outline, hover }, content, type, onClick }) => (
    <button
      type={type}
      className={cn('button', size, color, { outline }, { hover })}
      onClick={onClick}
    >
      {content}
    </button>
  )
);

Button.defaultProps = {
  size: 'md',
  color: 'black',
};

export default Button;

defaultProps 在这种情况下不起作用。如果我在解构道具时设置默认值，例如：

{ design: { size='md', color='black', outline, hover }, content, type, onClick }，有效。

我通过了道具：

<Button
    design={{ size: 'sm', outline: true }}
    content="Edit"
    onClick={onEditClick}
/>

这是怎么回事？

Answer 1

Button.defaultProps = {
  size: 'md',
  color: 'black',
};

您已经为尺寸和颜色定义了 defaultProps，但您的组件实际上并未使用尺寸或颜色属性。你确实有一个设计道具，所以你可以为此提供一个默认值：

Button.defaultProps = {
  design: { size: 'md', color: 'black' }
}

但这只有在 design 为 undefined 时才会有效。 defaultProps 不会递归到对象的嵌套属性。如果你传递一个对象给 design，即使是一个没有颜色的对象，react 也会看到 prop 不是 undefined，所以它不会使用默认的 props。

如果您需要为嵌套对象属性填写默认值，那么您将需要自己编写代码。比如你写的解构代码。

为什么 React defaultProps 不传递值？

Why are React defaultProps not passing values?

css

reactjs

react-memo