React Semantic UI Form.Select结合Divider实现选项分层展示

核心实现逻辑 #

Semantic UI React 的 Select 组件内置了自定义选项渲染的能力，不需要替换为独立的 List 组件即可实现分层展示效果，同时完全兼容原有选项的取值、选中校验逻辑。

推荐实现方案（无需修改原有数据源结构） #

直接通过组件提供的 renderOption 渲染回调，自定义每个下拉选项的DOM结构，搭配Divider实现分层分隔效果：

1. 保留原有 permissions 数组的所有字段结构，不需要拆分或额外处理字段
2. 给 Form.Select 传入 renderOption 回调，从回调参数中直接读取每个选项的 text、msg 字段，组装成带分隔的分层结构
3. 原有 onChange 取值逻辑完全不变，依然可以通过标准回调参数拿到选中项的对应 value 值

完整可运行代码示例 #

import React from 'react'
import { Form, Divider, List } from 'semantic-ui-react'

class PermissionSelect extends React.Component {
  constructor(props) {
    super(props)
    // 原有权限数组结构完全保留
    const permissions = [
      { key: 1, value: 1, text: 'Owner',msg:'Can fully configure and edit anything, manage workspaces and billing' },
      { key: 2, value: 2, text: 'Creator',msg:'Can completely configure a stack' },
      { key: 3, value: 3, text: 'Editor',msg:'Can only edit rows, cannot configure tables or columns' },
      { key: 4, value: 4, text: 'Commenter',msg:'Can only comment on rows' },
      { key: 5, value: 5, text: 'Read only',msg:'Cannot edit anything, only read' }
    ]
    this.state = {
      permissions,
      selectedPermission: null
    }
  }

  render() {
    return (
      <Form.Select 
        width={4} 
        style={{border:'2px solid #2185d0'}}
        placeholder='*Permission'
        className="OnMobileView"
        options={this.state.permissions}
        // 自定义下拉选项渲染
        renderOption={(option) => (
          <div style={{padding: '0.75rem 1rem'}}>
            {/* 上层：权限名称 加粗突出 */}
            <div style={{fontWeight: 600, fontSize: '1rem'}}>
              {option.text}
            </div>
            {/* 细分割线实现分层效果 */}
            <Divider style={{margin: '0.4rem 0'}} />
            {/* 下层：权限说明 浅灰弱化展示 */}
            <div style={{fontSize: '0.85rem', color: '#666', lineHeight: 1.4}}>
              {option.msg}
            </div>
          </div>
        )}
        // 原有取值逻辑完全兼容
        onChange={(e, {value}) => {
          this.setState({selectedPermission: value})
        }}
      />
    )
  }
}

可选优化：搭配List组件实现更顺滑的分层样式 #

如果不想手动写Divider和自定义样式，可以在renderOption中直接嵌入Semantic UI的List组件，利用List本身的标题/描述分层样式减少自定义代码：

// 替换renderOption的返回内容即可
renderOption={(option) => (
  <List.Item style={{padding: '0.75rem 1rem'}}>
    <List.Content>
      <List.Header style={{fontWeight: 600}}>
        {option.text}
      </List.Header>
      <List.Description style={{color: '#666', fontSize: '0.85rem'}}>
        {option.msg}
      </List.Description>
    </List.Content>
  </List.Item>
)}

注意事项 #

• 自定义选项内容时，不要拦截默认的点击、hover交互，否则会破坏Select的选中逻辑
• 调整选项内边距时尽量对齐组件默认的排版参数，避免出现内容偏移
• 如果需要自定义选中后输入框内的展示内容，可以额外传入renderLabel回调，调整选中标签的展示结构，不需要修改Select的核心逻辑

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