React中如何将后端返回的ID拆分为三个部分？

首先需要明确你的ID格式是通过分隔符（比如-）拆分出三个部分，以下提供两种常见实现方式：

方式一：拆分为三个独立的Chip组件 #

如果需要像示例图那样显示三个分开的Chip，你可以修改单元格渲染逻辑，返回包含多个Chip的容器：

import { Chip } from '@mui/material';
import { GridRenderCellParams } from '@mui/x-data-grid';

function renderSessionIDCell(params: GridRenderCellParams) {
  // 按分隔符拆分ID，这里假设用'-'，如果是其他分隔符替换即可
  const idParts = params.value?.split('-') || [];
  // 解构出三个部分，不足时补空字符串避免报错
  const [part1, part2, part3] = idParts.length === 3 ? idParts : ['', '', ''];

  return (
    <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
      <Chip 
        label={part1} 
        style={{ backgroundColor: '#FFEDED', color: 'black' }} 
      />
      <Chip 
        label={part2} 
        style={{ backgroundColor: '#E5F6FF', color: 'black' }} 
      />
      <Chip 
        label={part3} 
        style={{ backgroundColor: '#E8F5E9', color: 'black' }} 
      />
    </div>
  );
}

之后在DataGrid的列配置里，将renderCell设为这个函数即可。

方式二：在单个Chip内显示多段样式化内容 #

如果希望保持单个Chip容器，内部拆分显示三个带不同背景的分段：

import { Chip, ChipProps } from '@mui/material';
import { GridRenderCellParams } from '@mui/x-data-grid';

function getSessionIDChipProps(params: GridRenderCellParams): ChipProps {
  const idParts = params.value?.split('-') || [];
  const [part1, part2, part3] = idParts.length === 3 ? idParts : ['', '', ''];

  // 用JSX构建带分段样式的label
  const labelContent = (
    <div style={{ display: 'flex', gap: '4px' }}>
      <span style={{ 
        backgroundColor: '#FFEDED', 
        padding: '2px 8px', 
        borderRadius: '4px' 
      }}>{part1}</span>
      <span style={{ 
        backgroundColor: '#E5F6FF', 
        padding: '2px 8px', 
        borderRadius: '4px' 
      }}>{part2}</span>
      <span style={{ 
        backgroundColor: '#E8F5E9', 
        padding: '2px 8px', 
        borderRadius: '4px' 
      }}>{part3}</span>
    </div>
  );

  return {
    label: labelContent,
    style: { 
      backgroundColor: 'transparent', 
      padding: '4px 6px',
      border: 'none'
    },
  };
}

注意事项 #

• 如果你的ID分隔符不是-，将split('-')中的-替换为实际分隔符即可。
• 加入了边界处理：当ID为空或拆分后不足三个部分时，用空字符串填充，避免渲染报错。
• 样式可以根据需求自行调整背景色、间距等参数。

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