JSX에서 props인용 된 속성 값 내부에서 값을 어떻게 참조 합니까?
예를 들면 다음과 같습니다.
<img className="image" src="images/{this.props.image}" />결과 HTML 출력은 다음과 같습니다.
<img class="image" src="images/{this.props.image}">답변
React (또는 JSX)는 속성 값 내부에서 변수 보간을 지원하지 않지만 모든 속성 값으로 중괄호 안에 JS 표현식을 넣을 수 있으므로 다음과 같이 작동합니다.
<img className="image" src={"images/" + this.props.image} />답변
es6 템플릿 리터럴을 사용하려면 눈금 표시 주위에 중괄호가 필요합니다.
<img className="image" src={`images/${this.props.image}`} />답변
Harmony와 함께 JSX를 사용하는 경우 다음을 수행 할 수 있습니다.
<img className="image" src={`images/${this.props.image}`} />여기서는 src표현으로서의 가치를 쓰고 있습니다.
답변
변수와 문자열을 추가하는 대신 ES6 템플릿 문자열을 사용할 수 있습니다! 예를 들면 다음과 같습니다.
<img className="image" src={`images/${this.props.image}`} />JSX 내부의 다른 모든 JavaScript 구성 요소는 중괄호 안에 템플릿 문자열을 사용하십시오. 변수를 “주입”하려면 주입하려는 변수를 포함하는 중괄호 뒤에 달러 기호를 사용하십시오. 예를 들면 다음과 같습니다.
{`string ${variable} another string`}답변
모범 사례는이를 위해 getter 메소드를 추가하는 것입니다.
getImageURI() {
return "images/" + this.props.image;
}
<img className="image" src={this.getImageURI()} />그런 다음 나중에 더 많은 논리가 있으면 코드를 부드럽게 유지할 수 있습니다.
답변
People의 경우 ‘map’기능 및 동적 데이터에 대한 답변을 찾으려면 다음 예를 참조하십시오.
<img src={"http://examole.com/randomview/images" + each_actor['logo']} />URL은 ” http://examole.com/randomview/images/2/dp_pics/182328.jpg “로 표시됩니다 (임의의 예).
답변
참고 : 반응으로 자바 스크립트 표현식을 중괄호 안에 넣을 수 있습니다. 이 예제에서이 속성을 사용할 수 있습니다.
참고 : 아래 예제를 한 번 살펴보십시오.
class LoginForm extends React.Component {
constructor(props) {
super(props);
this.state = {i:1};
}
handleClick() {
this.setState(prevState => ({i : prevState.i + 1}));
console.log(this.state.j);
}
render() {
return (
<div>
<p onClick={this.handleClick.bind(this)}>Click to change image</p>
<img src={'images/back'+ this.state.i+'.jpg'}/>
</div>
);
}
}