• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

이미지 div 부분의 style 템플릿 리터럴 부분이 적용이 되지 않습니다.

21.02.15 21:02 작성 조회수 170

0

render() {
        const {result, score, imgCoord} = this.state;
        return (
            <>
                {imgCoord}
                <div id="computer" style={{ background : `url('https://en.pimg.jp/023/182/267/1/23182267.jpg') ${imgCoord} 0` }}/>
                <div>
                    <button id="rock" className="btn" onClick={() => this.onClick('바위')}>바위</button>
                    <button id="scissor" className="btn" onClick={() => this.onClick('가위')}>가위</button>
                    <button id="paper" className="btn" onClick={() => this.onClick('보')}>보</button>
                </div>
                <div>결과 {result}</div>
                <div>현재 {score}</div>
            </>
        );
    }

1. 선생님 방식대로 따라했으나 이미지가 변경되지 않습니다. 

{imgCoord}를 별도로 꺼내서 찍어보면 변경이 되는데 

<div id ="computer" 의 `${imgCoord}`여기에 넣을 경 해당 태그의 속성에서는 값이 변경이 되지 않습니다 .왜그럴까요 ? 

답변 2

·

답변을 작성해보세요.

1

지현님의 프로필

지현

2021.07.07

class RSP extends Component {
state = {
result: "",
imgCoord: rspCoords.바위,
score: 0,
};

저는 state 부분에서 imgCoord 값을 0으로 안하고 rspCoords.바위로 설정해주니까 동작하더라구요 !

o6o4_님의 프로필

o6o4_

2021.12.07

이거 때문에 한참 헤맸는데 감사합니다 ㅠㅠ

0

위에 {imgCoord}가 바뀌고 있다면 아래 background도 같이 바뀌고 있을 겁니다. imgCoord가 0 -142px -284px 처럼 px까지 붙어서 바뀌고 있는게 맞나요?