Можете ли вы зациклить элементы DOM и получить доступ к их реквизитам, используя ответные ссылки?

Question

У меня есть несколько одинаковых элементов DOM, но с разными реквизитами. Я надеялся перебрать каждый экземпляр элемента DOM, и, если свойство containsPlayer пусто, измените это свойство. Есть ли способ использовать ссылки React, чтобы сделать это? Вот соответствующие части кода с включенными ссылочными ссылками:

class Transfers extends React.Component{

        constructor(props){
        super(props)



        let i
        let player = []
        this.playerIconProps =[]

        this.playerRefs = []//create array of reactrefs for each player
        for (i=0; i<15;i++){
            player[i] = React.createRef()
            this.playerRefs[i] = player[i]

        }

        i=0
            for(i=0;i<15;i++){
                    this.playerIconProps[i] = {
                        onClick: this.handleIconClick,
                        playerName: '',
                        containsPlayer:null,
                        position:''


                    }
                }
            }


        }


        handlePlayerClick=(playerId)=>{
            this.props.selectPlayerFromTFL(playerId)
            console.log('worked')
        }



         renderPlayerList=(props)=>{

                return this.props.players.map((player)=>{return <RenderPlayerTransferList {...player} onClick = {this.handlePlayerClick} key = {player.id} id={player.id}/>})       
        }


    render(){
        let style1 = {
            position: 'relative'
        }

        return (

            <div className="text ui grid ">
                <div className= "three column row">
                        <div className=" text twelve wide column custom"> <h1>Transfers</h1></div>
                        <div className="four wide column"></div>    
                </div>
                <div className= "three column row">
                    <div className=" twelve wide column" style={style1}>

                {/*GK*/}
                        <PlayerIcon {...this.playerIconProps[0]} ref={this.playerRefs[0]} positionTop = {'100%'} positionLeft={'77%'} />
                        <PlayerIcon {...this.playerIconProps[1]} ref={this.playerRefs[1]} positionTop = {'0%'} positionLeft={'46%'} />
                {/*Def*/}
                        <PlayerIcon {...this.playerIconProps[2]} ref={this.playerRefs[2]} positionTop = {'10%'} positionLeft={'15%'} />
                        <PlayerIcon {...this.playerIconProps[3]} ref={this.playerRefs[3]} positionTop = {'10%'} positionLeft={'34%'} />
                        <PlayerIcon {...this.playerIconProps[4]} ref={this.playerRefs[4]} positionTop = {'10%'} positionLeft={'58%'} />
                        <PlayerIcon {...this.playerIconProps[5]} ref={this.playerRefs[5]} positionTop = {'10%'} positionLeft={'76.5%'} />
                {/*Mid*/}
                        <PlayerIcon {...this.playerIconProps[6]} ref={this.playerRefs[6]} positionTop = {'40%'} positionLeft={'15%'} />
                        <PlayerIcon {...this.playerIconProps[7]} ref={this.playerRefs[7]} positionTop = {'40%'} positionLeft={'34%'} />
                        <PlayerIcon {...this.playerIconProps[8]} ref={this.playerRefs[8]} positionTop = {'40%'} positionLeft={'58%'} />
                        <PlayerIcon {...this.playerIconProps[9]} ref={this.playerRefs[9]} positionTop = {'40%'} positionLeft={'76.5%'} />
                {/*Attack*/}
                        <PlayerIcon {...this.playerIconProps[10]} ref={this.playerRefs[10]} positionTop = {'70%'} positionLeft={'35%'} />
                        <PlayerIcon {...this.playerIconProps[11]} ref={this.playerRefs[11]} positionTop = {'70%'} positionLeft={'55%'} />

                {/*Subs*/}
                        <PlayerIcon {...this.playerIconProps[12]} ref={this.playerRefs[12]} positionTop = {'100%'} positionLeft={'17%'} />
                        <PlayerIcon {...this.playerIconProps[13]} ref={this.playerRefs[13]} positionTop = {'100%'} positionLeft={'37%'} />                      
                        <PlayerIcon {...this.playerIconProps[14]} ref={this.playerRefs[14]} positionTop = {'100%'} positionLeft={'57%'} />


                    </div>
                    <div className="four wide column">{this.renderPlayerList()}</div>

                </div>
            </div>      

        )
    }

}

Вот дочерний компонент, содержащий ссылку

import React from 'react'
import './Custom.css'

import {connect} from 'react-redux'
import {Link, useLocation} from 'react-router-dom'

//actions
import {getPlayers} from '../actions'

const PlayerIcon = React.forwardRef((props,ref)=>{


    let style = {
                position:'absolute',
                top: `${props.positionTop}`, 
                left: `${props.positionLeft}`
            //transform: `translate(${props.positionLeft})`
            }

    const handleClick=()=>{
            props.onClick()
    }


        return(
            <div style = {style} >
                <Link
                     to={{
                        pathname: "/transfers/options",
                        //state: {background:props.location}

                     }}>

                        <div onClick={handleClick} className = "player-icon" >
                                <i className="shirt fas fa-tshirt GK fa-3x"></i> 
                        <div ref={ref} className="player-info"> Player Name </div>
                    </div>
                </Link>
            </div>
        )


})

export default PlayerIcon