调用在 useEffect 中声明的 function

Question

我很新的反应。 我试图将签名模块添加到 React 组件中，到目前为止一切正常。 该模块还提供了几种方法，例如清除 canvas。 我的问题是，我不知道在哪里设置 function 以便稍后在渲染部分调用它。 我已经尝试了所有可能性（包括 useState、useRef），但找不到以某种方式设置 function 的方法，所以它是稍后的。

所以我想稍后在 return 语句中从 3rd 方库访问 clear 方法。 我知道 useEffect 显然不是设置 function 的正确位置（但是创建新的 SignaturePad 工作正常），但那会在哪里呢？

import SignaturePad from "signature_pad";


    function OtherInfo(){

useEffect(()=> {
    const canvas = document.getElementById("canvo")
    const signaturePad = new SignaturePad(canvas)
    
    // cannot be called later  
    const clear = signaturePad.clear()
}) 


    return (

<div className="spefcontainer">
<input type="text" placeholder="More..." />
<input type="text" placeholder="Stuff..."/>
<canvas id="canvo"> </canvas>
<button onClick={clear}>Clear</button>
</div>
);}

export default OtherInfo;

Answer 1

您可以将清除焊盘的代码放在组件内的常规 function 中吗？ 见下文。 出于特定原因，它是否必须在 useEffect 内部？

您可以尝试将 function 包装在 useMemo 中，这样它就不会在每次渲染组件时都运行。 另外，考虑您是否必须每次都创建 canvas 和签名板，或者仅在第一次渲染元素时（在这种情况下，您可以在 useEffect 中使用空的依赖数组初始化它们）

const clear = () => {

const canvas = document.getElementById("canvo")
const signaturePad = new SignaturePad(canvas)

// cannot be called later  
const clear = signaturePad.clear()}

Answer 2

useEffect() 钩子用于在事件发生后呈现相同的广告 componentDidMount() 和 componentDidMountUpdate()。

将该代码放在 useEffect() 之外并创建 function 'clear' 以在单击按钮时调用。

import SignaturePad from "signature_pad";


    function OtherInfo(){

   const clear = ()=> {
    const canvas = document.getElementById("canvo");
    const signaturePad = new SignaturePad(canvas);
    
    signaturePad.clear();
}) 


    return (

<div className="spefcontainer">
<input type="text" placeholder="More..." />
<input type="text" placeholder="Stuff..."/>
<canvas id="canvo"> </canvas>
<button onClick={clear}>Clear</button>
</div>
);}

export default OtherInfo;