reactjs - react ，动态添加文本到引用跨度

Question

我正在尝试将消息呈现到特定于列表中项目的 span 标签。我已经阅读了很多关于 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

我建议使用状态。因为字符串引用遗留 ( https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs )

const msgs = [
    { id:1, send:false },
    { id:2, send:false },
    { id:3, send:false },
];

this.state = {
    msgs
};

return this.state.msgs.map((msg, index) => {
    const status = msg.send ? "Email Sent" : "";
    <span>{ status }</span><Button onClick={() => this.handleResend(index)}>Resend Email</Button>
});

async handleResend (index) {
    const response = await callAPI(...);
    if(reponse.status !== 200) return;

    const newMsgs = _.cloneDeep(this.state.msgs);
    newMsgs[index].send = true;
    this.setState({
        msgs: newMsgs
    })
}