[react-g] 支持 createRoot 以及 render
xiaoiver opened this issue · comments
目前用法如下,需要重新创建 Canvas,对于已有的 Canvas 则无法使用:
import React, { useState } from 'react';
import { Canvas, Circle } from '@antv/react-g';
import { Renderer as CanvasRenderer } from '@antv/g-canvas';
const renderer = new CanvasRenderer();
const App = () => {
const [size, setSize] = useState(50);
return (
<Canvas width={600} height={400} renderer={renderer}>
<Circle
cx={100}
cy={200}
r={size}
fill="#1890FF"
stroke="#F04864"
lineWidth={4}
onClick={() => {
setSize(100);
}}
/>
</Canvas>
);
};
export default App;
参考 React 的用法:https://react.dev/reference/react-dom/client/createRoot#root-render
import { createRoot } from 'react-dom/client';
const domNode = document.getElementById('root');
const root = createRoot(domNode);
可以支持如下用法,使用 createRoot
传入已创建的 Canvas,然后调用 render
:
import { createRoot } from 'react-g';
const root = createRoot(canvas); // GCanvas
root.render(<Circle cx={100} cy={cy} />);
https://docs.pmnd.rs/react-three-fiber/api/canvas#custom-canvas