如何更改保存在数组中的 React 元素的道具？ JSX

Question

Im creating this custon React Element and pushing it into an array.

let new_image = <KonvaImage 
                            ref={newImageRef}
                            key={this.state.itemArray.length}
                            image={image}
                            width={new_size.width * reduction}
                            height={new_size.height * reduction}
                            x={ (width / 2 ) - (new_size.width * reduction / 2)}
                            y={ (height / 2) - (new_size.height * reduction / 2)}
                            draggable
                        />

        this.state.itemArray.push(new_image)

But I want to make the prop "draggable" conditional, depending on one state variable from his parent.

But it seems that i can't because this react element is read-only when it's created on the code above.

I want to change the prop on render, here:

render(){
        return( 
                 { //Renders all items into the canvas
                   this.state.itemArray.map(item => (
                      item   
                   ))
                            
                 }
        )
}

I have no clue on what to do, please help!

Answer 1

You could consider pushing a higher-order component to the array and then providing the prop when you render it.

You would add it like this:

let new_image = ({ draggable }) => (
  <KonvaImage
    ref={newImageRef}
    key={this.state.itemArray.length}
    image={image}
    width={new_size.width * reduction}
    height={new_size.height * reduction}
    x={width / 2 - (new_size.width * reduction) / 2}
    y={height / 2 - (new_size.height * reduction) / 2}
    draggable={draggable}
  />
);

this.state.itemArray.push(new_image)

And then when iterating through the array:

render(){
  return this.state.itemArray.map((Item) => <Item draggable={false} />);
};

Answer 2

Use React.cloneElement

From the docs :

React.cloneElement(
  element,
  [props],
  [...children]
)

You should be able to do this:

this.state.itemArray.push(React.cloneElement(
  new_image,
  { draggable: whatever_you_want }
))

If you prefer to do this to the whole array later, and if your set of components is a genuine Array, you can use traditional array addressing and manipulation to modify one or more items by replacing the initial components with clones whose properties have been modified. Otherwise, you'll need React.Children to work with a collection of children.