在react中集成了fabric.js的矩形

Question

import { fabric } from 'fabric';
const Canvas = () => {
const [canvas, setCanvas] = useState('');  
useEffect(() => {
setCanvas(initCanvas());
}, []);  

const initCanvas = () => (
new fabric.Canvas('canvas', {
height: 800,
width: 800,
})
); 
const addRect = canvi => {
const rect = new fabric.Rect({
height: 280,
width: 200,
fill: 'yellow'
});
canvi.add(rect);
canvi.renderAll();
}

return(
<div>
<button onClick={() => addRect(canvas)}></button>
<br/><br/>
<canvas id="canvas" />
</div>
);
}
export default Canvas;

我想在不使用按钮的情况下显示矩形，并在浏览器上显示其状态onload事件在react中也不起作用，我也尝试过使用onload的其他替代方法，但它没有帮助

Answer 1

我也在努力，如果你想添加矩形没有按钮点击，你可以把它添加到useEffect

const fuctionName = ()=>{
useEffect(() => {

return () => {
const canvas = new fabric.Canvas('canvas-main');

const rect = new fabric.Rect({
height: 280,
width: 200,
fill: 'yellow',
});
canvas.add(rect);
}
}, [])
return (
<>
<canvas

style={{ border: 'solid 1px #555' }}

id="canvas-main"

width="600px"

height="600px"
/>
</>
);
};