React，动态添加文本到参考范围

Question

我正在尝试向特定于列表中项目的跨度标记呈现消息。我读过很多关于 React 'refs' 的内容，但不知道如何在引用消息后用消息填充跨度。

因此，有一个项目列表，每个项目行都有自己的按钮，该按钮会触发具有与该项目关联的 id 的 API。根据 API 响应，我想用响应消息更新 span 标签，但仅限于该项目

创建列表时，项目将循环通过，每个项目都包含此

<span ref={'msg' + data.id}></span><Button onClick={() => this.handleResend(data.id)}>Resend Email</Button>

API 调用后，我想引用特定的跨度并在其中呈现正确的消息。但我无法弄清楚如何在代码的这一点上渲染到跨度。我知道这行不通，但这本质上就是我想要做的。有任何想法吗？

if (response.status === 200) {
    this.refs['msg' + id] = "Email sent";

Answer 1

解决方法已设置innerText

   this.refs['msg' + id].innerText = "Email sent";

但不是使用ref尝试使用state来更新渲染内的元素。