React JSX에서 따옴표 안의 소품에 액세스

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>
      );

  }
}

다음은 Dynamic className 또는 Props에 대한 최상의 옵션입니다. Javascript에서와 마찬가지로 연결을 수행하십시오.

     className={
        "badge " +
        (this.props.value ? "badge-primary " : "badge-danger ") +
        " m-4"
      }

당신이 사용할 수있는

<img className="image" src=`images/${this.props.image}`>

또는

<img className="image" src={'images/'+this.props.image}>

또는

  render() {
         let imageUrl = this.props.image ? "images/"+this.props.image : 'some placeholder url image';
    return (
       <div>
          <img className="image" src={imageUrl} />
       </div>
    )
  }