React+MUI动态文本一致布局实现及Grid映射key问题解决

方案1：嵌套Grid布局（解决key映射问题） #

通过两层Grid结构实现对齐，外层Grid按列排列每行，每行作为带key的Grid item，内部Grid分配各元素的空间占比，确保所有行的图标、文本1、文本2始终对齐。

import { Grid, Box, Typography } from '@mui/material';
import { SomeIcon } from '@mui/icons-material';

const data = [
  { icon: <SomeIcon />, text1: "短文本", text2: "右侧文本1" },
  { icon: <SomeIcon />, text1: "这是一段很长很长的动态文本内容", text2: "右侧文本2" },
];

export default function AlignedLayout() {
  return (
    <Grid container direction="column" gap={2}>
      {data.map((item, index) => (
        <Grid item key={index}>
          <Grid container alignItems="center" gap={1}>
            {/* 图标+文本1单元 */}
            <Grid item xs={8} container alignItems="center" gap={1}>
              <Box>{item.icon}</Box>
              <Typography variant="body1">{item.text1}</Typography>
            </Grid>
            {/* 独立文本2 */}
            <Grid item xs={4}>
              <Typography variant="body1">{item.text2}</Typography>
            </Grid>
          </Grid>
        </Grid>
      ))}
    </Grid>
  );
}

方案2：Flex布局结合flex比例控制 #

用Box（MUI的Flex容器）替代Grid，通过flex属性分配各区域空间占比，同样给每行包裹带key的容器，解决Fragment无法设key的问题。

import { Box, Typography } from '@mui/material';
import { SomeIcon } from '@mui/icons-material';

const data = [
  { icon: <SomeIcon />, text1: "短文本", text2: "右侧文本1" },
  { icon: <SomeIcon />, text1: "这是一段很长很长的动态文本内容", text2: "右侧文本2" },
];

export default function AlignedLayout() {
  return (
    <Box display="flex" flexDirection="column" gap={2}>
      {data.map((item, index) => (
        <Box key={index} display="flex" alignItems="center" gap={2}>
          {/* 图标+文本1单元 */}
          <Box display="flex" alignItems="center" gap={1} flex="2 1 auto">
            {item.icon}
            <Typography variant="body1" flex="1 1 auto">{item.text1}</Typography>
          </Box>
          {/* 独立文本2 */}
          <Box flex="1 1 auto" textAlign="right">
            <Typography variant="body1">{item.text2}</Typography>
          </Box>
        </Box>
      ))}
    </Box>
  );
}

核心要点 #

• 避免React Fragment映射：直接将每行内容包裹在Grid item或Box中并设置key，解决映射时的key警告问题。
• 固定空间占比：无论是Grid的列比例（xs={8}/xs={4}）还是Flex的flex属性，核心是给图标+文本1、文本2分配固定的空间比例，确保文本长度变化时元素对齐。
• 垂直对齐：通过alignItems="center"确保图标与文本在垂直方向居中，提升视觉一致性。

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