React中如何将changedFields列表元素分行渲染？

嘿，我看看你的问题哈～你现在的Dialog里变更字段挤成一团，主要是因为用了错误的表格标签结构，而且直接把数组丢进去渲染，元素自然会连在一起。咱们来改改：

问题根源 #

你在<DialogContentText>里混用了<td>和<tr>标签，这是表格专用的结构，放在普通文本容器里会打乱布局；另外直接渲染changedFields数组，React会把数组元素直接拼接成字符串，所以所有字段都挤在一行了。

解决方案：遍历数组渲染单独行 #

我们可以用Array.map()遍历changedFields数组，给每个字段生成单独的块级元素（比如<p>或者列表项<li>），这样每个字段就会自动换行。下面给你两种实现方式：

方式1：用<p>标签实现换行

<Dialog open={this.state.isDialogOpen} onClose={this.handleClose} aria-labelledby="alert-dialog-title" aria-describedby="alert-dialog-description">
  <DialogTitle id="responsive-dialog-title">{'ARE YOU SURE YOU WISH TO MAKE THESE CHANGES?'}</DialogTitle>
  <DialogContent>
    <DialogContentText>
      <span style={{ fontWeight: 'bold', marginBottom: '8px', display: 'block' }}>You changed:</span>
      {/* 遍历数组，每个字段单独一行 */}
      {this.state.changedFields.map((field, index) => (
        <p key={index} style={{ margin: '4px 0' }}>{field}</p>
      ))}
    </DialogContentText>
  </DialogContent>
  <DialogActions>
    <Button onClick={this.handleClose} color="primary">
      DISCARD CHANGES
    </Button>
    <Button onClick={this.handleClose} color="primary" autoFocus>
      YES, KEEP CHANGES
    </Button>
  </DialogActions>
</Dialog>

方式2：用列表（视觉更清晰）

<Dialog open={this.state.isDialogOpen} onClose={this.handleClose} aria-labelledby="alert-dialog-title" aria-describedby="alert-dialog-description">
  <DialogTitle id="responsive-dialog-title">{'ARE YOU SURE YOU WISH TO MAKE THESE CHANGES?'}</DialogTitle>
  <DialogContent>
    <DialogContentText>
      <span style={{ fontWeight: 'bold' }}>You changed:</span>
      <ul style={{ marginTop: '8px', paddingLeft: '20px' }}>
        {this.state.changedFields.map((field, index) => (
          <li key={index}>{field}</li>
        ))}
      </ul>
    </DialogContentText>
  </DialogContent>
  <DialogActions>
    <Button onClick={this.handleClose} color="primary">
      DISCARD CHANGES
    </Button>
    <Button onClick={this.handleClose} color="primary" autoFocus>
      YES, KEEP CHANGES
    </Button>
  </DialogActions>
</Dialog>

关键改动说明 #

1. 移除表格标签：把<td>换成<span>，避免表格结构带来的布局混乱；
2. 遍历数组渲染：用map()遍历changedFields，给每个字段生成独立元素，确保换行；
3. 添加key属性：React列表渲染必须给每个子元素加唯一key，避免控制台警告；
4. 调整样式：通过内联样式（比如margin、display: block）增加元素间距，提升可读性。

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