如何使用 React 添加 Konva 组件？

Question

我对 React 比较陌生，在尝试将KonvaJS集成到 React 时遇到了困难。我正在尝试遵循Konva 概述中显示的第一个示例：

// 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();

所以我创建了自己的文件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 组件 (&nbsp;https://reactjs.org/tutorial/tutorial.html#overview&nbsp;)所以 react 组件不会直接创建元素（如 Konva 节点或 DOM 元素）。他们只是定义页面（或画布元素）应该如何看待最后。如果您想使用 for-loop 或其他方式创建元素，您只需要定义应用程序的“状态”以及从该状态生成的组件。const App = () => {&nbsp; const [circle, setCircles] = React.useState([{x: 10, y: 10}, {x: 100, y: 100}]);&nbsp; return (&nbsp; &nbsp; <Stage width={window.innerWidth} height={window.innerHeight}>&nbsp; &nbsp; &nbsp; <Layer>&nbsp; &nbsp; &nbsp; &nbsp; {circles.map(circle => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Circle x={circle.x}&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; y={circle.y}&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; radius={70}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fill={'red'}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; stroke={'black'}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; strokeWidth={4}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; ))}&nbsp; &nbsp; &nbsp; </Layer>&nbsp; &nbsp; </Stage>&nbsp; );}