类型上不存在属性“initGradient”

Question

我正在用反应和打字稿建立一个网站。 我无法实现在“https://kevinhufnagl.com/how-to-stripe-website-gradient-effect/”上找到的渐变背景。 当我初始化渐变时，我收到一个错误“ Property 'initGradient' does not exist on type 'Gradient' ” 下面代码中的 'initGradient' 引发了错误

这是我写的代码：`

function App() {
  <script src="./Gradient"></script>;
  const gradient = new Gradient();
  gradient.initGradient("#gradient-canvas");
  return (

    <div>
      <canvas
        id="gradient-canvas"
        className="absolute w-50 h-50"
        ></canvas>
    </div>
  );
}

export default App;`

我创建了一个文件“Gradient.js”，其中的代码取自上面链接的网站。 我还在 App.css 中实现了必要的样式

我使用相同的代码使用标准 HTML 和 CSS 创建了一个网站，并且能够正确实现它。 但是，我现在正尝试在 React 和 Typescript 中构建站点。 我也在这个项目中使用了顺风。 任何帮助和建议将不胜感激，因为我花了太长时间试图实现这一点！ 谢谢！

Answer 1

您似乎正在尝试使用脚本标记导入 Gradient.js 文件？ 如果是这样，您应该使用模块导入。

import gradient from './Gradient'

function App() {
  gradient.initGradient("#gradient-canvas");

  return (

    <div>
      <canvas
        id="gradient-canvas"
        className="absolute w-50 h-50"
        ></canvas>
    </div>
  );
}

export default App;`

至于gradient.initGradient("#gradient-canvas"); 我必须查看实际的 Gradient.js 文件，看看它是否可行。

Answer 2

我今天花了大约 6 个小时在 React 中使用各种网格渐变实现，然后才完成这个

渐变成分：

 useEffect(() => {
        setTimeout(() => {
            const gradient: any = new Gradient();
            gradient.initGradient("#gradient-canvas");
        }, 1);
    }, []);
    return <canvas id="gradient-canvas" data-transition-in />;

CSS

canvas {
    width: 100%;
    height: 100%;
    --gradient-color-1: #c3e4ff;
    --gradient-color-2: #6ec3f4;
    --gradient-color-3: #eae2ff;
    --gradient-color-4: #b9beff;
}