如何在React的ListItemText组件中添加更多文本，实现三级文本展示

完全可以实现，Material UI 官方设计上就允许自定义ListItemText的渲染内容，常用有两种实现方式：

方案1：复用secondary属性传入多段文本 #

ListItemText的secondary本身支持传入任意React节点，不需要被官方预设的“两级文本”限制，直接在secondary内按层级放多段Typography即可：

<Paper>
  <List sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}>
    {this.state.bookReviews.map((review =>
      <>
        <ListItem alignItems="flex-start" key={review.id}>
          <ListItemAvatar>
            <Avatar alt="Cindy Baker" />
          </ListItemAvatar>
          <ListItemText
            primary={review.heading}
            secondary={
              <React.Fragment>
                {/* 二级文本：评论者名 */}
                <Typography
                  sx={{ display: 'block' }}
                  component="span"
                  variant="body2"
                  color="text.primary"
                >
                  {review.reviewerName}
                </Typography>
                {/* 三级文本：评论内容 */}
                <Typography
                  sx={{ display: 'block', my: 0.5 }}
                  component="p"
                  variant="body2"
                  color="text.secondary"
                >
                  {review.reviewText}
                </Typography>
                {/* 如需更多层级可继续叠加，比如评论时间 */}
                <Typography
                  sx={{ display: 'block' }}
                  component="span"
                  variant="caption"
                  color="text.disabled"
                >
                  {review.createTime}
                </Typography>
              </React.Fragment>
            }
          />
        </ListItem>
        <Divider variant="inset" component="li"/>
      </>
    ))}
  </List>
</Paper>

该方案改造成本最低，不需要改动原有组件结构，适合只需要新增文本层级的场景。

方案2：自定义文本区域，不使用ListItemText内置封装 #

如果后续还要在文本区域加点赞、回复按钮等其他交互元素，可以直接放弃ListItemText组件，自己编写文本容器结构，自由度最高：

<ListItem alignItems="flex-start" key={review.id}>
  <ListItemAvatar>
    <Avatar alt="Cindy Baker" />
  </ListItemAvatar>
  {/* 自定义文本容器，完全自主控制层级和元素 */}
  <Box sx={{ ml: 2 }}>
    <Typography variant="subtitle1" color="text.primary">
      {review.heading}
    </Typography>
    <Typography variant="body2" color="text.primary" sx={{ mt: 0.5 }}>
      {review.reviewerName}
    </Typography>
    <Typography variant="body2" color="text.secondary" sx={{ my: 0.5 }}>
      {review.reviewText}
    </Typography>
    <Typography variant="caption" color="text.disabled">
      {review.createTime}
    </Typography>
  </Box>
</ListItem>

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