如何以编程方式引用正在创建的元素的id？
提问于 2020-10-27 12:35:23
我正在创建一个聊天应用程序，我想用地图功能列出数据中列出的所有聊天室。当用户从列表中选择某个房间时，主页更新以显示所选房间的消息。
对于创建的按钮的onClick事件，我在使用它的id时遇到问题。我尝试使用this、this.id，甚至使用map函数中提供的索引，因为id与索引相同；但是，我的setSelectedRoom似乎不喜欢这个函数。
i应该可以工作，但是我得到了‘太多的重新呈现’的错误。我不太清楚该如何解决这个问题。有什么想法吗？
地图功能是必要的，以便页面可以更新时，新的聊天室被添加，那么我如何避免‘太多的重新呈现’错误？
{props.chatData.map((val, i) => {
return (
<Button className={`room-${i}`} id={i} onClick={setSelectedRoom(i)}>#{val.name}</Button>
)
})}
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-10-27 12:41:17
我可以给你个主意。试试这样的东西，
{
props.chatData.map((val, i) => {
return (
<Button className={`room-${i}`} id={i} onClick={() => setSelectedRoom(i)}>
#{val.name}
</Button>
);
});
}而且，我认为id是一个HTML，我们不能访问它。尝试使用其他名称，如chatID，您可以通过this.props.chatID访问它。
JSX表达式会立即执行，所以每当它呈现时，它就会调用自己无限次。这就是为什么用另一个函数包装它的原因。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64562521
复制相关文章
腾讯云开发者
