Question

我对React还是比较陌生，在尝试将KonvaJS集成到React时陷入困境。我正在尝试遵循Konva Overview中显示的第一个示例：

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

// If you want your app to work offline and load faster, you can change
serviceWorker.unregister();

但是当我npm start出现此错误时：

Stage.js:105 Uncaught Can not find container in document with id container

所以，我不确定为什么会这样，

我在网上找到的所有示例都创建了Konva组件，如下所示：

<Stage>
    <Layers>
        <Shapes>

例如here和here，但我很好奇我尝试的方式是否可行以及为什么目前无法正常工作。

因此，如果我遵循上述结构并执行以下操作：

import React from 'react';
import './App.css';
import {Stage, Layer, Circle} from 'react-konva';

function App() {
  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        <Circle x={window.innerWidth / 2} 
                y={window.innerHeight / 2} 
                radius={70}
                fill={'red'}
                stroke={'black'}
                strokeWidth={4}
        />
      </Layer>
    </Stage>
  );
}

export default App;

它正确显示一个红色圆圈，但是如果我想使用for循环自动创建某些层，或使用Javascript创建元素，那我该怎么办？

Answer 1

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

因此React组件不会直接创建元素（例如Konva节点或DOM元素）。它们只是定义页面（或画布元素）的外观。

如果要使用for循环或其他方式创建元素，则只需定义应用程序的“状态”并从该状态生成组件。

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>
  );
}

如何使用React添加Konva组件？

1 个答案: