類型上不存在屬性“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;
}