在使用Fabric.js的React项目中如何改写document.getElementById相关原生JS代码？

• 直接在React组件内声明事件处理函数，在JSX元素上绑定onChange事件即可，不需要调用原生DOM API绑定事件
• 新增边界判断逻辑，避免编辑器未初始化、画布无选中元素时触发报错

修改后的完整组件代码如下：

import { useFabricJSEditor } from '你对应的依赖路径'
import { fabric } from 'fabric'
import Navbar from '你对应的Navbar组件路径'

export default function App() {
  const { editor, onReady } = useFabricJSEditor();

  const onAddCircle = () => {
    editor?.addCircle();
  };

  const onAddRectangle = () => {
    editor?.addRectangle();
  };

  const insertText = () => {
    editor?.canvas.add(new fabric.IText('Tap and Type', {
      left: 40,
      top: 100,
      fontFamily: 'comic sans ms',
      fill: 'red',
      fontSize: 28,
    }));
  };

  // 文字颜色修改逻辑，替换原原生JS代码
  const handleTextColorChange = (e) => {
    if (!editor?.canvas) return
    const activeObject = editor.canvas.getActiveObject()
    if (!activeObject) return
    activeObject.setFill(e.target.value)
    editor.canvas.renderAll()
  }

  return (
    <div className="App">
      <Navbar />

      <div className="bg-light border-top p-4 mb-3">
        <h1 className="display-5">Customize Your Shirt</h1>
        {/* 颜色选择器直接绑定React合成事件 */}
        <input 
          type="color" 
          id="text-color"
          onChange={handleTextColorChange}
          defaultValue="#ff0000"
        />
        <label htmlFor="text-color">调整文字颜色</label>
      </div>
      {/* 记得补充你的Fabric画布组件，绑定onReady回调 */}
      {/* <FabricJSEditor onReady={onReady} /> */}
    </div>
  );
}

补充说明：
如果你现有的项目中已经有id="text-color"的颜色选择元素，只需要删除原有的原生事件绑定逻辑，给该元素加上onChange={handleTextColorChange}属性即可。
代码中使用的可选链?.语法是为了兼容编辑器未初始化完成的场景，避免出现空指针报错。

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