如何添加為屬性並獲取 React Konva 元素 ID

Question

我想知道如何向元素添加 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來獲取填充並將其替換為其他屬性