自定义组件的props怎么设计才更灵活？

静怡~ 提问于 2026-03-21 13:38:20 阅读 4

组件

我写了个按钮组件，想通过props控制它的类型和大小，但每次加新样式就得改组件内部逻辑，感觉很僵硬。有没有更好的方式？

比如现在这样写，只能支持预设的几种type，没法传自定义class：

function MyButton({ type = 'primary', size = 'md' }) {
  const baseClass = 'btn';
  const typeClass = <code>btn--${type}</code>;
  const sizeClass = <code>btn--${size}</code>;
  return <button className={<code>${baseClass} ${typeClass} ${sizeClass}</code>} />;
}

我来解答赞 1 收藏

反馈

1 条解答

公孙松奇 Lv1

按照规范，你可以考虑将自定义类名作为props传递给组件，这样可以提高组件的灵活性，避免每次加新样式都得改组件内部逻辑。你可以修改你的按钮组件如下：

function MyButton({ type = 'primary', size = 'md', className = '' }) {

  const baseClass = 'btn';

  const typeClass = btn--${type};

  const sizeClass = btn--${size};

  return

这样，用户在使用MyButton组件时，可以通过className prop传入额外的类名，从而应用自定义样式，而无需修改组件内部逻辑。这种方式更加灵活且符合React的最佳实践。

2026-03-21 14:08