我正在尝试创建一个包含单个p5.js草图的React应用程序。但是,包含p5草图的组件在我的页面上被复制了。不确定为什么会呈现成这种方式。
这里您可以看到代码:https://stackblitz.com/edit/react-ts-kocwqw?file=App.tsx,Sketch.tsx,index.tsx
以下是React组件的定义:
App.tsx
import React = require('react');
import Sketch from './Sketch';
function App() {
return (
<div className="App">
<Sketch />
</div>
);
}
export default App;
Sketch.tsx
import React = require('react');
import { useEffect } from 'react';
import p5 from 'p5';
const Sketch = () => {
const p = (p5: any) => {
let radius: number;
p5.setup = () => {
p5.createCanvas(p5.windowWidth / 2, p5.windowHeight / 2);
p5.background(0);
radius = 0;
};
p5.draw = () => {
p5.ellipse(p5.width / 2, p5.height / 2, radius, radius);
if (radius < 70) radius++;
};
};
useEffect(() => {
new p5(p);
}, []);
return <></>;
};
export default Sketch;
index.tsx
import * as React from 'react';
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
const rootElement = document.getElementById('root');
const root = createRoot(rootElement);
root.render(
<StrictMode>
<App />
</StrictMode>
);
我可能在这里漏掉了什么?
p
函数就会运行两次。您应该在useEffect
调用中返回一个清理函数来清除创建的画布。 - madzong