1

我在纯 JS 和 HTML 中有以下代码

<div id="sketchWrapper">
    <div id="initiatorContainer"></div>
</div>

const sketchWrapper = document.getElementById("sketchWrapper");
const sketch = initSketchWrapper(sketchWrapper).sketch;

const session = IK.initSession(APP_ID);
session.on("drawingCreated", (event) => {
    session.insert(event.drawing, "sketchWrapper");
    sketch();
}).connect(() => {
    session.initiate("initiatorContainer");
    sketch();
});

这段代码有效，我想在我的 React 项目中使用它。由于我需要访问 HTML 元素，我的第一个想法是使用它，useEffect因为它是在组件渲染后执行的。

const MyComponent = () => {
  const sketchEl = useRef();
  const initiatorEl = useRef();

  useEffect(() => {
    const sketch = initSketchWrapper(sketchEl.current).sketch;
    const session = IK.initSession(APP_ID);

    session
      .on("drawingCreated", (event) => {
        session.insert(event.drawing, sketchEl.current);
        sketch();
      })
      .connect(() => {
        session.initiate(initiatorEl.current);
        sketch();
      });
  });

  return (
    <div ref={sketchEl}>
      <div ref={initiatorEl} />
    </div>
  );
};

该代码有效，但我不确定这是否是正确的方法。如果我想扩展组件以添加需要访问已定义sketch常量的函数，该怎么做？因为目前该sketch常量只能在内部访问，useEffect但我无法在其外部定义它，因为它需要访问组件的渲染输出。

const handleButtonClick = () => {
    // ... some code
    sketch()  // <- can't access this because it's inside the useEffect function
}
4

0 回答 0