React JS中如何基于onSelect事件实现元素条件渲染

要不要用JSON做按钮配置？ #

非常建议使用配置化方案实现，你既可以单独抽离JSON文件存储配置，也可以在组件内定义JS配置常量，两种方式都远优于硬编码JSX的实现。

具体实现思路 #

• 第一步：定义按钮配置映射，以下拉选项的唯一值作为key，对应选项要展示的按钮数组作为value，每个按钮的配置可包含标识、显示文本、点击事件、样式类型等自定义属性
• 第二步：用useState管理下拉菜单的当前选中值
• 第三步：根据当前选中值从配置映射中取出对应的按钮列表，遍历渲染即可

代码示例 #

import { useState } from 'react';
import { Select, Button } from 'antd'; // 示例组件可替换为你项目内的自有组件

// 按钮配置，也可以单独抽成buttonConfig.json文件引入
const BUTTON_CONFIG = {
  option1: [
    { id: 'btn1-1', text: '按钮1', type: 'primary', onClick: () => console.log('点击按钮1') },
    { id: 'btn1-2', text: '按钮2', type: 'default', onClick: () => console.log('点击按钮2') },
    // 剩余3个按钮按相同结构补充
  ],
  option2: [
    { id: 'btn2-1', text: '按钮A', type: 'primary', onClick: () => console.log('点击按钮A') },
    { id: 'btn2-2', text: '按钮B', type: 'default', onClick: () => console.log('点击按钮B') },
    // 剩余7个按钮按相同结构补充
  ]
};

const DropdownWithButtons = () => {
  const [selectedOption, setSelectedOption] = useState('');

  return (
    <div>
      <Select
        value={selectedOption}
        onChange={setSelectedOption}
        options={[
          { value: 'option1', label: '第一个选项' },
          { value: 'option2', label: '第二个选项' }
        ]}
        style={{ width: 200, marginBottom: 16 }}
      />
      {/* 渲染对应按钮组 */}
      {selectedOption && (
        <div className="button-group">
          {BUTTON_CONFIG[selectedOption].map(btn => (
            <Button
              key={btn.id}
              type={btn.type}
              onClick={btn.onClick}
              style={{ marginRight: 8, marginBottom: 8 }}
            >
              {btn.text}
            </Button>
          ))}
        </div>
      )}
    </div>
  );
};

export default DropdownWithButtons;

配置化的优势 #

• 后续新增下拉选项、修改对应按钮数量/属性时，只需要修改配置项，不需要调整渲染逻辑
• 配置可以抽离为单独的JSON文件，支持非开发人员直接修改配置内容
• 逻辑更清晰，避免JSX中嵌套大量条件判断，降低维护成本

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