我是使用React konva的新手,我想知道如何向元素添加ID并类似于DOM元素的e.target.getAttribute(“ id”)检索它。要注意的一件事是,元素基于作为父组件一部分的数组。为了使元素基于父级的数组呈现,我在和子级添加了和在父级组件。简而言之,它的结构是这样的。
父类:
<div class="designScreen" onMouseDown={this.activateRouteTrigger} onMouseUp={this.deactivateRouteTrigger} onMouseMove={this.updateRoutePosition} >
<Stage
width={900}
height={700}>
<Layer>
{
this.state.trends.map((el) => {
return <Content id={el.id}
element={el.element}
color={el.color}
title={el.title}
type={el.type}
visibilityStatus={el.visibilityStatus}
selectType={this.selectType}
parentCallback = {this.selectDestinations}
selectedDestinationID = {this.state.selectedDestinationID}
destinations={this.state.destinations}
parentCallbackColor = {this.changeColorSelector}
timerString={this.state.timerString}
/>
})
}
</Layer>
</Stage>
</div>
儿童班:
render(){
const ex1= <Group >
<Rect name="name" onClick={this.selectedRouteID} width={10} height={10} draggable={true} fill="green"></Rect>
<Arrow id={`${this.props.element} content`} onClick={this.selectedRouteID} points={[700,300,200,300]} pointerLength={20} zIndex={5} draggable="true"
pointerWidth={20} fill={`${this.props.color}`} stroke={`${this.props.color}`} strokeWidth={4} />
</Group>
const ex2=
<Arrow points={[100,300,600,300]} pointerLength={20} zIndex={5} draggable="true"
pointerWidth={20} fill={`${this.props.color}`} stroke={`${this.props.color}`} strokeWidth={4} />
return(
this.props.element==="line" ? ex1 : ex2
)
}
}
答案 0 :(得分:0)
我已解决它,使用e.target.getAttrs().fill
进行填充并将其替换为其他属性