尽管 React 中存在 element，为什么 document.getElementById() 在 React 中返回 null？

Question

我在 React 类组件中有这段代码，当我尝试调用 document.getElementById(photo._id) 时，它一直返回 null，尽管当我尝试 console.log(photo._id) 时code> 在这两行中，渲染中的行首先打印在控制台中，因此 id 应该在那里？

componentDidMount() {
    this.props.location.state.product.photos.map((photo) => {
      return axios
        .get(`${SERVER_HOST}/products/photo/${photo.filename}`)
        .then((res) => {
          if (res.data) {
            if (res.data.errorMessage) {
              console.log(res.data.errorMessage);
            } else {
              console.log(photo._id);
              console.log(document.getElementById(photo._id));
            }
          } else {
            console.log("Record not found");
          }
        });
    });
  }

render() {
    return (
    {this.props.location.state.product.photos.map((photo) => {
         { console.log(photo._id); }
         <img key={photo._id} id={photo._id} />;
   
     })}
  )
}

这是控制台的图片

Answer 1

您没有在地图函数中返回图像元素。因此，它没有安装在 dom 树中，您无法使用 document.getElementById() 访问它

render() {
    return (
    {this.props.location.state.product.photos.map((photo) => {
         { console.log(photo._id); }
          {/** return keyword is missing here **/}
         return <img key={photo._id} id={photo._id} />;
   
     })}
  )
}

Answer 2

将渲染函数体替换为以下代码。

return this.props?.location?.state?.product?.photos?.map((photo) => 
   <img key={photo._id} id={photo._id} src={...} />;