React中getElementById设置innerHTML无法显示图片的问题咨询

问题背景 #

需要实现：根据API返回的条件展示对应飞机图片，点击飞机图片的特定区域时，在底部显示关联的厨房（galley）图片。原实现用switch-case拼接HTML字符串，通过innerHTML插入DOM，导致图片无法显示，也无法正常设置CSS样式，需要更优方案支持图片宽高属性设置。

原代码核心问题 #

1. React资源路径解析失败：res = '<img src={galley}/>'中的{galley}是JSX语法，直接插入innerHTML会被当作纯文本字符串，无法解析为实际的图片资源URL。
2. 直接操作DOM违背React数据流：用document.getElementById修改innerHTML，脱离了React的状态管理，容易引发状态与DOM不一致的问题。
3. 逻辑耦合：showGalleyImages函数既操作DOM又返回内容，职责不清晰。

优化方案 #

1. 用React状态管理选中的关联图片，通过声明式渲染替代DOM操作。
2. 点击坐标判断后，更新状态变量，在JSX中条件渲染图片。
3. 直接通过JSX属性设置图片的width、height，支持样式控制。
4. 移除所有直接操作DOM的代码，遵循React的状态驱动渲染原则。

重构后的完整代码 #

import React, { useEffect, useState } from 'react'
import '../../../assets/styles/modal.scss';
import '../../../assets/styles/styles.scss';
import { useTranslation } from 'react-i18next';
import { useLocation } from 'react-router-dom';
import B777 from '../../../assets/images/B777.jpg';
import A350 from '../../../assets/images/A350.png';
import galley from '../../../assets/images/galley.jpg';
import { _ } from 'ag-grid-community';
import { DFPAPIEndpoint } from '../../../utils/axios';

export const ConfigureGalley = (props) => {
  const location = useLocation();
  const { t } = useTranslation();
  
  const [imageCord, setImageCord] = useState({ x: '', y: '' });
  const [carts, setCarts] = useState([]);
  const [galleyItems, setGalleyItems] = useState({});
  const [selectedGalleyImage, setSelectedGalleyImage] = useState(null); // 状态管理选中的图片
  const [modalFormStatusObj, setModalFormStatusObj] = useState({ text: '' });
  const [inputFields, setInputFields] = useState(false);

  useEffect(() => {
    const savedGalley = JSON.parse(localStorage.getItem("galleyDetails"));
    setGalleyItems(savedGalley);
    if (savedGalley) {
      setCarts(savedGalley.galleys);
    }
  }, [location.pathname]);

  useEffect(() => {
    if (galleyItems?.galleys) {
      setCarts(galleyItems.galleys);
    }

    const handleAircraftClick = (e) => {
      const rect = e.target.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const y = e.clientY - rect.top;
      setImageCord({ x, y });

      // 点击坐标判断，直接设置图片状态
      if (x > 91 && x < 147 && y > 120 && y < 178) {
        setSelectedGalleyImage(galley);
      } else {
        setSelectedGalleyImage(null); // 点击其他区域清空图片
      }
    };

    const aircraftElement = document.getElementById("aircraft");
    if (aircraftElement) {
      aircraftElement.addEventListener('click', handleAircraftClick);
      // 清理事件监听，避免内存泄漏
      return () => aircraftElement.removeEventListener('click', handleAircraftClick);
    }
  }, [galleyItems]);

  return (
    <>
      <div className="container-fluid dashboard-summary-container sm-scrollbar">
        <div className="op-aircraft-container flexCol full-flex ag-theme-alpine-dark">
          <div 
            style={{ position: 'relative', marginTop: '100px', border: '1px solid green', cursor: 'pointer' }} 
            className="row flexRow" 
            id="aircraft"
          >
            {Boolean(galleyItems) && Object.values(galleyItems).includes('A350') 
              ? <img src={A350} alt="A350" width="50%" height="50%" /> 
              : <img src={B777} alt="B777" width="50%" height="50%" />}
          </div>

          <div 
            style={{ position: 'relative', marginTop: '100px' }} 
            className="row flexRow" 
            id='galleyDesign'
          >
            {/* 条件渲染图片，直接设置宽高与样式 */}
            {selectedGalleyImage && (
              <img 
                src={selectedGalleyImage} 
                alt="Galley" 
                width="50%" 
                height="50%" 
                // 可添加className或style自定义样式
                // className="galley-image"
                // style={{ border: '1px solid blue' }}
              />
            )}
          </div>
        </div>
      </div>
    </>
  );
}

关键改进点 #

• 新增selectedGalleyImage状态变量，专门管理要显示的关联图片。
• 将坐标判断逻辑移到点击事件监听中，直接更新状态，避免DOM操作。
• 通过JSX条件渲染图片，React会自动解析src={selectedGalleyImage}为正确的资源URL。
• 支持直接设置width、height属性，也可以通过className或style添加自定义样式。
• 添加事件监听的清理函数，避免组件卸载后内存泄漏。

内容的提问来源于stack exchange，提问作者bugsmasher