NextJS中如何为上传的截图动态创建Div元素？

你遇到的错误原因很明确：你用的createElement是React的React.createElement，它返回的是React虚拟DOM元素，不是浏览器原生的DOM Node，而appendChild只能接收真实的DOM节点，所以会抛出类型错误。

React的核心思路是状态驱动视图，完全不需要手动操作DOM来添加元素，直接通过遍历状态数组渲染对应的JSX元素即可，这也是NextJS/React开发的标准做法，比你之前的方式更简洁可靠。

具体实现方案 #

情况1：newBug.attachments是File对象数组（用户刚上传的本地文件） #

如果你的状态数组里存的是用户上传的File对象，需要先通过URL.createObjectURL生成临时可访问的图片URL，再渲染到Div中：

import { useEffect, useState, useRef } from 'react';

// 假设你的组件基础结构
const BugReportForm = () => {
  const [newBug, setNewBug] = useState({ attachments: [] });
  const attachmentsRef = useRef(null);

  // 处理文件上传的逻辑（示例）
  const handleFileUpload = (e) => {
    const files = Array.from(e.target.files);
    setNewBug(prev => ({
      ...prev,
      attachments: [...prev.attachments, ...files]
    }));
  };

  return (
    <div className="bug-form">
      {/* 文件上传输入框 */}
      <input type="file" multiple accept="image/*" onChange={handleFileUpload} />
      
      {/* 截图展示区域 */}
      <div ref={attachmentsRef} className="screenshotsList" style={{ display: 'flex', flexWrap: 'wrap' }}>
        {newBug.attachments.map((file, index) => {
          const imageUrl = URL.createObjectURL(file);
          
          // 释放临时URL，避免内存泄漏
          useEffect(() => {
            return () => URL.revokeObjectURL(imageUrl);
          }, [file]);
          
          return (
            <div
              key={`${file.name}-${index}`}
              className="screenshot"
              style={{ 
                backgroundImage: `url(${imageUrl})`,
                backgroundSize: 'cover',
                backgroundPosition: 'center',
                width: '150px',
                height: '150px',
                margin: '0 8px 8px 0',
                borderRadius: '4px',
                border: '1px solid #eee'
              }}
            />
          );
        })}
      </div>
    </div>
  );
};

export default BugReportForm;

情况2：newBug.attachments是图片URL数组（已上传到后端的地址） #

如果你的状态数组里已经是可直接访问的图片URL（比如上传后后端返回的地址），代码会更简洁：

<div ref={attachmentsRef} className="screenshotsList" style={{ display: 'flex', flexWrap: 'wrap' }}>
  {newBug.attachments.map((imgUrl, index) => (
    <div
      key={`${imgUrl}-${index}`}
      className="screenshot"
      style={{ 
        backgroundImage: `url(${imgUrl})`,
        backgroundSize: 'cover',
        backgroundPosition: 'center',
        width: '150px',
        height: '150px',
        margin: '0 8px 8px 0',
        borderRadius: '4px',
        border: '1px solid #eee'
      }}
    />
  ))}
</div>

关键注意事项 #

• 遍历数组时，key属性必须唯一，尽量避免只用index（当数组元素顺序变化时会导致渲染异常），优先用文件的唯一标识（如文件名、后端返回的ID）。
• 如果使用URL.createObjectURL，一定要记得在组件卸载或者对应的文件被从数组中移除时调用URL.revokeObjectURL释放资源，防止内存泄漏。

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