时间戳

首页 > 解决方案 > 在反应中动态地将图像添加到 DOM

reactjs - 在反应中动态地将图像添加到 DOM

问题描述

我有一个更新二进制数据的套接字连接。

通过单击我想更新图像 src ，图像被创建为空白，带有空 src 和 id ，但我没有发现我该怎么做：

$('imageId').src = 'new src' like in Jquery

我有图像数组，所以我不能为每个图像this.ref或其他东西定义

我的套接字代码：//这里我要更新具体的图像

   divSocket.on('data', (data) => {
        var bytes = new Uint8Array(data);            
        this.setState({
            imageSrc : someBufferFunction(bytes)
        })
    });

我的渲染代码

   { this.props.list.map((item,i) =>(
     <div className="img">
        <img  id={`cam${i}`} src={`data:image/jpeg;base64,${this.state.imageSrc}`} />
     </div>
    ))}

问题是this.state.ImageSrc它将更新所有图像并在所有图像中显示套接字数据（视频）

我可以在循环中创建具有特定 id 的图像，但是如何通过 props/state 更新特定图像

标签： reactjs

解决方案

您正在使用数组来显示图像......来自props......this.props.list

此列表应包含每个图像的数据......但item参数不用于.map渲染。

我需要做一个占位符

假设props.list不包含任何数据...用作循环计数器...仅呈现占位符...您需要：

  • src本地状态数组( this.state.sources = [];)
  • key你应该使用prop渲染图像：
{ this.props.list.map((item,i) => (
    <div className="img" key={`cam${i}`} >
      <img  id={`cam${i}`} src={this.state.sources[i]} />
    </div>
))}
  • 您可以将占位符图像用于空的“单元格”
<img  id={`cam${i}`} src={this.state.sources[i] ? this.state.sources[i] : "url_somePlaceholder.jpg"} />

来自套接字的新图像需要使用索引来更新数组元素——对于所有图像来说并不常见——this.state.sources请参阅React：如何使用 setState 更新 state.item[1]？寻找灵感。

如果之前假设 props.list在开始时包含图像源 - 将值复制到状态（incomponentDidMount或）componentDidUpdatestatic getDerivedStateFromProps

推荐阅读