在React中运行VexFlow的EasyScore教程出现appendChild调用错误如何解决

算力阿峰

2026-10-11

问题原因

React函数组件的执行顺序为：先执行函数体内所有同步代码，再将return的虚拟DOM转换为真实DOM挂载到页面。在组件顶层直接执行VexFlow初始化代码时，id为boo的容器还未挂载到DOM树，VexFlow查找不到对应元素，拿到的目标元素为null，调用appendChild方法时自然抛出类型错误。
若组件触发重渲染，顶层的初始化逻辑会重复执行，导致多次创建五线谱实例，引发冗余异常。

解决方案

将VexFlow的初始化逻辑放到useEffect钩子中执行，配合useRef绑定DOM元素，保证DOM挂载完成后才执行渲染操作，同时避免重复初始化，修正后代码如下：

import React, { useRef, useEffect } from 'react'
import Vex from 'vexflow'
import './App.css'

export default function App() {
  const containerRef = useRef(null);
  // 标记是否已初始化，避免严格模式下重复执行
  const isRenderedRef = useRef(false);

  useEffect(() => {
    if (isRenderedRef.current || !containerRef.current) return;
    
    const VF = Vex.Flow;
    // 直接传入已存在的DOM元素，比传elementId查找更稳妥
    const vf = new VF.Factory({
      renderer: { element: containerRef.current }
    });
    const score = vf.EasyScore();
    const system = vf.System();

    system.addStave({
      voices: [score.voice(score.notes('C#5/q, B4, A4, G#4'))]
    }).addClef('treble').addTimeSignature('4/4');

    vf.draw();
    isRenderedRef.current = true;

    // 组件卸载时清理容器内容
    return () => {
      containerRef.current?.replaceChildren();
    }
  }, [])

  return (
    <div ref={containerRef}></div>
  ) 
}

核心改动说明