Реагировать, динамически добавлять текст в ref span

Question

Я пытаюсь отобразить сообщение в теге span, относящемся к элементу в списке. Я много читал о React 'refs', но не могу понять, как заполнить промежуток сообщением после ссылки на него.

Итак, есть список элементов, и каждая строка элементов имеет свою собственную кнопку, которая запускает API с идентификатором, связанным с этим элементом. В зависимости от ответа API, я хочу обновить тег span с ответным сообщением, но только для этого элемента

Когда список создается, элементы циклически повторяются, и каждый элемент включает это

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

После вызова API я хочу сослаться на конкретный диапазон и отобразить правильное сообщение внутри него. Но я не могу понять, как визуализировать в span в этой точке кода. Я знаю, что это не работает, но по сути это то, что я пытаюсь сделать. Есть идеи?

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

Answer 1

Я рекомендую использовать состояние. потому что строка refs legacy (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
    })
}

Answer 2

Я столкнулся с этой проблемой прямо сейчас, и я понял это следующим образом:

// currentQuestion is a dynamic Object that comes from somewhere and type is a value
const _target = `${currentQuestion.type}_01` 
const _val = this[`${_target}`].current.clientHeight // here is the magic

обратите внимание, что мы не используем . после этого для вызова рефери и не используем refs для достижения того, что мы хотим.
я просто догадался, что this должен быть объектом, который будет содержать внутренние переменные текущего объекта. тогда, поскольку ref находится внутри этого объекта, мы должны иметь возможность вызывать его, используя динамические значения, как указано выше ...

Я могу сказать, что это сработало автоматически!

Answer 3

Обходной путь установлен innerText

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

Но вместо использования ref попробуйте использовать state для обновления элементов внутри рендера.