React MUI ButtonGroup组件如何通过props.children渲染多个按钮？

原代码的核心问题是重复复用同一个props.children，导致三个按钮内容完全一致；同时将ButtonGroup的所有props传递给每个Button可能引发属性冲突（比如ButtonGroup的布局属性对Button无效）。以下是两种可行的解决方案：

方案一：让父组件传入完整的Button作为children（推荐） #

这种方式符合React组件的设计思路，父组件可以自由控制每个按钮的内容、样式和事件，组件内部只需将children直接放入ButtonGroup即可：

修改后的组件代码：

import * as React from "react";
import ButtonGroup from "@mui/material/ButtonGroup";
import PropTypes from "prop-types";

export const MyComponent = (props) => {
  const { children, ...buttonGroupProps } = props;
  return (
     <ButtonGroup {...buttonGroupProps}>
          {children}
     </ButtonGroup> 
  );
};

MyComponent.propTypes = {
 children: PropTypes.node.isRequired, 
};

父组件使用示例：

// 在父组件中调用
<MyComponent variant="contained">
  <Button>按钮1</Button>
  <Button>按钮2</Button>
  <Button>按钮3</Button>
</MyComponent>

方案二：组件固定生成三个按钮，通过单独props传递内容 #

如果你的组件需要固定生成三个按钮，不需要父组件传入完整Button，可以定义三个独立props来接收每个按钮的内容：

修改后的组件代码：

import * as React from "react";
import Button from "@mui/material/Button";
import ButtonGroup from "@mui/material/ButtonGroup";
import PropTypes from "prop-types";

export const MyComponent = (props) => {
  const { button1Content, button2Content, button3Content, ...buttonGroupProps } = props;
  return (
     <ButtonGroup {...buttonGroupProps}>
          <Button>{button1Content}</Button>
          <Button>{button2Content}</Button>
          <Button>{button3Content}</Button>
     </ButtonGroup> 
  );
};

MyComponent.propTypes = {
 button1Content: PropTypes.node.isRequired,
 button2Content: PropTypes.node.isRequired,
 button3Content: PropTypes.node.isRequired,
};

父组件使用示例：

<MyComponent 
  variant="contained"
  button1Content="按钮1"
  button2Content="按钮2"
  button3Content="按钮3"
/>

内容的提问来源于stack exchange，提问作者user3448925