Question

我正在尝试转换旧的 gatsby 站点以开始使用钩子。我有一个让我困惑的功能。我有以下代码：

在 index.js 文件中，有：

export default class Home extends Component {

  componentDidMount() {
    new window.CABLES.Patch({
      patchFile: '/patch/js/Banner_-_FP.json',
      prefixAssetPath:'/patch/',
      glCanvasId:'cables-canvas',
      glCanvasResizeToParent: true,
    });
  }

  render() {

    return (
      <div className="home">

        <div className="section-banner" id="cables-container">
          <div className="canvas">
            <canvas id="cables-canvas"></canvas>
          </div>
        </div>

      </div>
    )
  }
}

我已经在组件文件夹中有“/patch/js/Banner_-_FP.json”。如果可能，我只是想知道如何将此部分转换为使用钩子：

  componentDidMount() {
    new window.CABLES.Patch({
      patchFile: '/patch/js/Banner_-_FP.json',
      prefixAssetPath:'/patch/',
      glCanvasId:'cables-canvas',
      glCanvasResizeToParent: true,
    });
  }

任何输入都会很棒。谢谢！

Answer 1

你可以使用一个叫做useEffect的钩子，将第二个参数array deps作为空传递，所以当你将array deps作为空数组传递时，它会像componentDidMount一样被触发，你可以阅读更多here< /p>

 useEffect(() => {
     new window.CABLES.Patch({
      patchFile: '/patch/js/Banner_-_FP.json',
      prefixAssetPath:'/patch/',
      glCanvasId:'cables-canvas',
      glCanvasResizeToParent: true,
    });
 }, [])

Answer 2

就是这样：

Documentation 已经使用了转换示例，请查看


    componentDidMount() {
        new window.CABLES.Patch({
          patchFile: '/patch/js/Banner_-_FP.json',
          prefixAssetPath:'/patch/',
          glCanvasId:'cables-canvas',
          glCanvasResizeToParent: true,
        });
      }
      
      
    useEffect(() => {
      new window.CABLES.Patch({
          patchFile: '/patch/js/Banner_-_FP.json',
          prefixAssetPath:'/patch/',
          glCanvasId:'cables-canvas',
          glCanvasResizeToParent: true,
        }); 
    },[])

Answer 3

您的代码应该类似于：

import React, { useEffect } from 'react';

const Home = () => {
  useEffect(() => {
    const applyPatch = () => {
      new window.CABLES.Patch({
        patchFile: '/patch/js/Banner_-_FP.json',
        prefixAssetPath: '/patch/',
        glCanvasId: 'cables-canvas',
        glCanvasResizeToParent: true,
      });
    };

    applyPatch();
  }, []);

  return (
    <div className="home">

      <div className="section-banner" id="cables-container">
        <div className="canvas">
          <canvas id="cables-canvas"></canvas>
        </div>
      </div>

    </div>
  );
};

export default Home;

我不确定这个 new window.CABLES.Patch() 到底在做什么，如果将它附加到 window 对象并以这种方式执行它是否是个好主意，但如果它有任何依赖关系，您应该将它们提供给 useEffect（空的 []）的第二个参数。这基本上也将处理 componentDidUpdate 类钩子。此外，如果这段代码应该有一些清理逻辑（一个，你会在 componentWillUnmount 中执行），你也应该在 useEffect 中通过返回一个清理函数来处理它。

将 React 组件转换为钩子

3 个答案: