javascript - 为什么我的图像没有按预期渲染或翻译？

Question

我正在尝试将图像放在背景上，并根据this.pitchWidth. 的属性this.playerRef似乎在内部正确更新，componentDidMount但由于某种原因，没有className="fas fa-tshirt GK"渲染的图像。有人知道为什么吗？

import React from 'react'
import backgroundImage from "../images/Football_Field.png";
import '../Pitch.css'

class Team extends React.Component{ 
    constructor(props){
        super(props)
        this.playerRef = React.createRef();
        this.pitchWidth = 500; //in em
        this.styles = {transform:''}
    }
    componentDidMount = ()=>{
        this.playerRef.current.style.transform = `translate(100em,${this.pitchWidth/2}em)`
        console.log(this.playerRef)
    }
    render(){
        let style = {
            margin:'auto',
            backgroundRepeat: 'no-repeat',
            backgroundImage:'url('+ backgroundImage +')',
            backgroundRepeat: 'no-repeat',
            backgroundPosition: 'center',
            width: this.pitchWidth,
            height: '400px',
            border: '2px dashed #333',
            backgroundSize: '100% 100%'
        }
        return (
            <div className="pitch-container" style={style}>
                <i className="fas fa-tshirt GK" ref={this.playerRef} style={this.styles}></i>
                <i className="fas fa-tshirt LB"  ></i>
            </div>       
        )
    }
}

export default Team;