React技术问题：放置于CSS Grid的简易单选按钮组件故障排查

嘿，很高兴看到你在搭建第一个React应用时就考虑到了组件复用！用react-bootstrap的Toggle组件来封装通用的单选按钮组是个很棒的选择，既能利用成熟库的稳定性，又能打造符合自己需求的专属组件。下面我给你完善一下这个ToolButtonGroup的实现，让它更健壮、易用：

这个组件会接收选项列表、当前选中值和变化回调作为props，内部封装react-bootstrap的ToggleButtonGroup和ToggleButton，同时支持自定义样式：

import { ToggleButtonGroup, ToggleButton } from 'react-bootstrap';
import PropTypes from 'prop-types';

const ToolButtonGroup = ({ options, selectedValue, onValueChange, className }) => {
  return (
    <ToggleButtonGroup
      type="radio"
      name="tool-filter-group"
      value={selectedValue}
      onChange={onValueChange}
      className={`${className} custom-tool-button-group`}
    >
      {options.map((option) => (
        <ToggleButton
          key={option.value}
          id={`tool-btn-${option.value}`}
          value={option.value}
          variant={selectedValue === option.value ? 'primary' : 'light'}
        >
          {option.label}
        </ToggleButton>
      ))}
    </ToggleButtonGroup>
  );
};

// 定义props类型，提升组件健壮性
ToolButtonGroup.propTypes = {
  options: PropTypes.arrayOf(
    PropTypes.shape({
      value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
      label: PropTypes.string.isRequired,
    })
  ).isRequired,
  selectedValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
  onValueChange: PropTypes.func.isRequired,
  className: PropTypes.string,
};

// 默认props
ToolButtonGroup.defaultProps = {
  className: '',
};

export default ToolButtonGroup;

在你的页面或图表组件中，就可以轻松复用这个按钮组，结合状态管理来实现数据过滤：

import { useState } from 'react';
import ToolButtonGroup from './ToolButtonGroup';
import YourChartComponent from './YourChartComponent';

const ChartPage = () => {
  // 初始化选中值，比如默认显示"全部"数据
  const [filterValue, setFilterValue] = useState('all');
  // 模拟图表数据源
  const chartData = [
    { category: 'sales', value: 120, type: 'all' },
    { category: 'sales', value: 80, type: 'month' },
    { category: 'sales', value: 30, type: 'week' },
    // 更多数据...
  ];

  // 过滤数据的函数
  const getFilteredData = () => {
    if (filterValue === 'all') return chartData;
    return chartData.filter(item => item.type === filterValue);
  };

  return (
    <div className="chart-container">
      <h3>销售数据统计</h3>
      {/* 使用自定义的按钮组 */}
      <ToolButtonGroup
        options={[
          { value: 'all', label: '全部数据' },
          { value: 'month', label: '月度数据' },
          { value: 'week', label: '周度数据' },
        ]}
        selectedValue={filterValue}
        onValueChange={(value) => setFilterValue(value)}
      />
      {/* 传入过滤后的数据到图表组件 */}
      <YourChartComponent data={getFilteredData()} />
    </div>
  );
};

export default ChartPage;

如果想要让按钮组更贴合你的应用风格，可以添加自定义CSS来调整外观：

.custom-tool-button-group .btn {
  margin-right: 8px;
  border-radius: 6px;
  font-weight: 500;
}

.custom-tool-button-group .btn-primary {
  background-color: #2563eb;
  border-color: #2563eb;
}

.custom-tool-button-group .btn-light:hover {
  background-color: #f3f4f6;
}

• 支持禁用状态：可以给组件添加isDisabled props，传递给ToggleButtonGroup的disabled属性，方便在数据加载时禁用按钮组
• 支持垂直布局：添加orientation props，可选horizontal或vertical，传递给ToggleButtonGroup
• 国际化支持：如果需要多语言，可以让options的label接收翻译后的文本，或者组件内部集成i18n逻辑

这样封装后的组件不仅能在应用的多数页面复用，还能灵活适配不同的场景需求，非常适合作为你的核心组件之一！

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