使用 react-water-wave 时 Hook 调用无效答案

【问题标题】：Invalid Hook call when using the react-water-wave使用 react-water-wave 时 Hook 调用无效
【发布时间】：2021-05-11 20:51:39
【问题描述】：

我需要在我的 react.js 应用程序中设置 react-water-wave 模块：

https://github.com/homerchen19/react-water-wave

这是我目前拥有的沙盒：

https://codesandbox.io/embed/old-leaf-iqke2?fontsize=14&hidenavigation=1&theme=dark

我面临的错误是：

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

代码是：

import Background from "./background.jpeg";
import WaterWave from 'react-water-wave';
import './App.css';

function App() {

  let renderFirstold = () => {
    return (
        <WaterWave
        style={{
          width: "100%",
          height: "100vh",
          backgroundSize: "cover",
          background: `url(${Background}) no-repeat center center fixed`
        }}
        dropRadius={20}
        perturbance={0.01}
        interactive={true}
      >
      </WaterWave>
    )
  }

  return (
    <div className="App">
        {renderFirstold()}
    </div>
  );
}

export default App;

如果这是问题，我可以转换回基于类的组件。请帮帮我。

【问题讨论】：

标签： reactjs

【解决方案1】：

如果你查看 react-water-wave package.json 它的依赖标记为依赖 "react": "^16.9.0" 同时你的沙箱使用 react 17.0.2。这样你就面临第一种情况：

1. You might have mismatching versions of React and the renderer (such as React DOM)

如果您将 react 和 react-dom 降级到 16.9，它会按预期工作（您还需要将 import React from "react" 添加回您的文件中）。

【讨论】：