React中多次渲染的Card组件如何优雅选取内部元素获取数据？

方案1（最推荐）：利用React数据驱动特性，完全避开DOM读取 #

你父组件渲染Card时已经给每个子组件传入了对应的reminder数据，直接在组件内部调用删除方法时传递该数据即可，完全不需要访问DOM节点：

1. 调整Card组件内删除按钮的点击逻辑：

// Card 组件内部代码
handleDelete = () => {
  // 直接取props传入的当前卡片对应数据，传递给父组件的删除方法
  this.props.deleteRem(this.props.reminder)
}

// 渲染删除按钮时绑定上述事件
<button onClick={this.handleDelete}>删除</button>

2. 父组件的deleteReminder方法直接接收传入的数据即可构造请求参数：

deleteReminder = (currentReminder) => {
  const plainData = {
    // 直接从传入的reminder对象里取对应字段即可，无需读DOM
    reminder: currentReminder.你的内容字段名,
    date: currentReminder.你的日期字段名
  }
  // 后续直接提交plainData到Flask后端即可
}

该方案完全符合React的设计范式，可维护性最高，后续无论Card内部DOM结构怎么调整，删除逻辑都不需要改动。

方案2（次选，仅适配不想修改组件传参逻辑的场景）：使用自定义属性简化DOM取值 #

如果暂时不想调整组件层级的传参逻辑，也可以通过data-*自定义属性规避冗长的链式DOM访问：

1. 在Card组件的删除按钮上挂载需要的字段：

<button 
  onClick={删除事件绑定}
  data-reminder={reminder.你的内容字段名}
  data-date={reminder.你的日期字段名}
>
删除
</button>

2. 点击事件里直接从元素的dataset属性取值即可：

const plainData = {
  reminder: event.target.dataset.reminder,
  date: event.target.dataset.date
}

该方案比链式DOM访问稳定性高很多，只要自定义属性保留，DOM结构调整不会影响取值逻辑。

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