如何在Preact中渲染手动创建的Canvas元素列表？

问题原因 #

Preact的虚拟DOM无法直接渲染真实的DOM节点实例（比如你用document.createElement创建的Canvas），直接在JSX中插入DOM元素会被转成字符串，导致渲染失败。

解决方案 #

可以通过以下两种方式实现：

方法1：使用Ref容器动态挂载Canvas

1. 定义状态存储Canvas实例数组：

const [snapshots, setSnapshots] = useState([]);

2. 创建一个容器Ref，用于挂载Canvas元素：

const containerRef = useRef(null);

3. 监听snapshots状态变化，将Canvas元素添加到容器中：

useEffect(() => {
  const container = containerRef.current;
  if (!container) return;
  
  // 清空容器原有内容
  container.innerHTML = '';
  // 将每个Canvas元素添加到容器
  snapshots.forEach(canvas => {
    container.appendChild(canvas);
  });
}, [snapshots]);

4. 在JSX中渲染容器：

<div ref={containerRef}></div>

方法2：封装自定义Canvas渲染组件

1. 创建一个接收Canvas实例的组件：

function CanvasElement({ canvas }) {
  const ref = useRef(null);

  useEffect(() => {
    const container = ref.current;
    if (!container || !canvas) return;
    
    container.innerHTML = '';
    container.appendChild(canvas);
  }, [canvas]);

  return <div ref={ref}></div>;
}

2. 在主组件中遍历snapshots渲染该组件：

<div>
  {snapshots.map((canvas, index) => (
    <CanvasElement key={index} canvas={canvas} />
  ))}
</div>

注意事项 #

• 如果你需要重复添加Canvas，注意避免内存泄漏：在移除组件或更新状态时，可考虑从DOM中移除旧的Canvas元素（上面的方法中通过container.innerHTML = ''已经处理了）。
• 确保每个Canvas元素的key属性唯一（方法2中用index作为key，若Canvas顺序固定可以使用，否则建议用唯一标识）。

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