如何使用 React 添加 Konva 组件？

Question

我对 React 比较陌生，在尝试将KonvaJS集成到 React 时遇到了困难。我正在尝试遵循Konva 概述中显示的第一个示例：// first we need to create a stagevar stage = new Konva.Stage({  container: 'container',   // id of container <div>  width: 500,  height: 500});// then create layervar layer = new Konva.Layer();// create our shapevar circle = new Konva.Circle({  x: stage.width() / 2,  y: stage.height() / 2,  radius: 70,  fill: 'red',  stroke: 'black',  strokeWidth: 4});// add the shape to the layerlayer.add(circle);// add the layer to the stagestage.add(layer);// draw the imagelayer.draw();所以我创建了自己的文件KonvaDrawer.js来封装上面的代码：import Konva from 'konva';function KonvaDrawer() {    // first we need to create a stage    var stage = new Konva.Stage({        container: 'container',   // id of container <div>        width: 500,        height: 500    });        // then create layer    var layer = new Konva.Layer();        // create our shape    var circle = new Konva.Circle({        x: stage.width() / 2,        y: stage.height() / 2,        radius: 70,        fill: 'red',        stroke: 'black',        strokeWidth: 4    });        // add the shape to the layer    layer.add(circle);        // add the layer to the stage    stage.add(layer);        // draw the image    layer.draw();}export default KonvaDrawer;然后在我的 App.js 中，我使用上面的代码创建了div它id="container"需要有一个具有该 id 的 div（或者这就是我所理解的）import React from 'react';import './App.css';function App() {  return (    <div id="container"></div>  );}export default App;最后是我调用KonvaDrawer函数的 index.js：import React from 'react';import ReactDOM from 'react-dom';import './index.css';import App from './App';import * as serviceWorker from './serviceWorker';import KonvaDrawer from './KonvaDrawer';ReactDOM.render(  <React.StrictMode>    <App />    {KonvaDrawer()}  </React.StrictMode>,  document.getElementById('root'));

Answer 1

你KonvaDrawer只是一个直接创建 Konva 节点的函数。它不能用作 React 组件 ( https://reactjs.org/tutorial/tutorial.html#overview )

所以 react 组件不会直接创建元素（如 Konva 节点或 DOM 元素）。他们只是定义页面（或画布元素）应该如何看待最后。

如果您想使用 for-loop 或其他方式创建元素，您只需要定义应用程序的“状态”以及从该状态生成的组件。

const App = () => {

  const [circle, setCircles] = React.useState([{x: 10, y: 10}, {x: 100, y: 100}]);

  return (

    <Stage width={window.innerWidth} height={window.innerHeight}>

      <Layer>

        {circles.map(circle => (

          <Circle x={circle.x} 

                y={circle.y} 

                radius={70}

                fill={'red'}

                stroke={'black'}

                strokeWidth={4}

          />

        ))}

      </Layer>

    </Stage>

  );

}