如何添加为属性并获取React Konva元素ID

Question

我是使用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




        )
    }

    }

Answer 1

我已解决它，使用e.target.getAttrs().fill进行填充并将其替换为其他属性