Javascript 元素列表的唯一引用

我试图将refs应用于数组生成的元素列表，以便在我觉得合适的时候（有条件地）更改类

renderMessageGroup(message) {
    const date = message[0];

    return (
        <li ref={this.messageGroups[date]} key={date}>
            {Object.values(message[1]).map(obj => this.renderMessage(obj, date))}
        </li>
    );
}

renderMessage(obj, date) {
    if(typeof obj != "object") return null;

    if(obj.user == this.context.user.id) this.messageGroups[date].classList.add("self");

    return (
        <div className="message" key={obj._id}>
            {obj.message}
        </div>
    );
}

render() {
    return (
        <div>
            {Object.entries(this.state.messages).map(this.renderMessageGroup)}
        </div>
    );
}

renderMessageGroup（消息）{
const date=消息[0]；
返回(

{Object.values（message[1]）.map（obj=>this.renderMessage（obj，date））}

);
}
渲染消息（obj，日期）{
if（typeof obj！=“object”）返回null；
如果（obj.user==this.context.user.id）this.messageGroups[date].classList.add（“self”）；
返回(
{obj.message}
);
}
render（）{
返回(
{Object.entries（this.state.messages）.map（this.renderMessageGroup）}
);
}

---

有什么方法可以实现这一点吗？

我假设

ref={this.messageGroups[date]}

是您试图实现的，而不是您已经实现的。你考虑过类似的事情吗

对你来说可能是这样的：

Object.entries(this.state.messages).forEach(message => {
    this[`messageGroups${message[0]}`] = React.createRef();
})

将其像静态引用一样放置在构造函数中

---

编辑：在ref字符串中添加了反勾号。

我对此有一些问题；我似乎无法在构造函数中使用它，因为

message

总是未定义的。但是，如果我将其移动到

componentDidMount

中，则

current

始终为空。我好像想不出来。