使用反作用水波时无效的Hook调用

Question

我需要在react.js应用程序中设置react水波模块：

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

这是我迄今为止拥有的沙盒：

https://codesandbox.io/embed/old-leaf-iqke2?fontsize=14&隐藏导航=1&主题=深色

我面临的错误是：

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;

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

Answer 1

如果您查看react水波包.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 and react dom降级为16.9，它将按预期工作(您还需要将import React from "react"添加回文件(。