Почему мое изображение не переводится или переводится как ожидалось? - PullRequest
Новая
       12

Почему мое изображение не переводится или переводится как ожидалось?

0 голосов
/ 20 октября 2019

Я пытаюсь поместить изображение поверх фона, где оно переводится вокруг фона на основе значения 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;
...