在React Konva中,要添加as属性并获取元素ID,可以按照以下步骤进行操作:
npm install react-konva konva
import React from 'react';
import { Stage, Layer, Rect } from 'react-konva';
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
elementId: null
};
}
render() {
return (
<Stage width={window.innerWidth} height={window.innerHeight}>
<Layer>
<Rect
x={20}
y={20}
width={100}
height={100}
fill="red"
draggable
as="myElement" // 添加as属性并设置元素ID
onDragEnd={(e) => {
const elementId = e.target.attrs.as; // 获取元素ID
this.setState({ elementId });
}}
/>
</Layer>
</Stage>
);
}
}
render() {
const { elementId } = this.state;
return (
<div>
<p>当前元素ID: {elementId}</p>
<Stage width={window.innerWidth} height={window.innerHeight}>
{/* ... */}
</Stage>
</div>
);
}
这样,当矩形元素被拖动时,元素ID将被获取并显示在页面上。
关于React Konva的更多信息和使用方法,可以参考腾讯云的相关产品文档: React Konva产品介绍
领取专属 10元无门槛券
手把手带您无忧上云