Truy cập đạo cụ bên trong dấu ngoặc kép trong React JSX

Trong JSX, làm thế nào để bạn tham chiếu một giá trị propstừ bên trong một giá trị thuộc tính được trích dẫn?

Ví dụ:

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

Kết quả đầu ra HTML là:

<img class="image" src="images/{this.props.image}">

React (hoặc JSX) không hỗ trợ phép nội suy biến trong một giá trị thuộc tính, nhưng bạn có thể đặt bất kỳ biểu thức JS nào trong dấu ngoặc nhọn làm toàn bộ giá trị thuộc tính, vì vậy điều này hoạt động:

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

Nếu bạn muốn sử dụng mẫu chữ es6, bạn cũng cần niềng răng xung quanh dấu tick:

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

Nếu bạn đang sử dụng JSX với Harmony, bạn có thể làm điều này:

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

Ở đây bạn đang viết giá trị srcnhư là một biểu thức.

Thay vì thêm các biến và chuỗi, bạn có thể sử dụng chuỗi mẫu ES6! Đây là một ví dụ:

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

Đối với tất cả các thành phần JavaScript khác bên trong JSX, hãy sử dụng các chuỗi mẫu bên trong các dấu ngoặc nhọn. Để "tiêm" một biến, hãy sử dụng ký hiệu đô la, sau đó là dấu ngoặc nhọn chứa biến bạn muốn tiêm. Ví dụ:

{`string ${variable} another string`}

Thực hành tốt nhất là thêm phương thức getter cho điều đó:

getImageURI() {
  return "images/" + this.props.image;
}

<img className="image" src={this.getImageURI()} />

Sau đó, nếu bạn có nhiều logic hơn sau này, bạn có thể duy trì mã trơn tru.

Đối với Mọi người, tìm kiếm câu trả lời từ chức năng 'bản đồ' và dữ liệu động, đây là một ví dụ hoạt động.

<img src={"http://examole.com/randomview/images" + each_actor['logo']} />

Điều này cung cấp URL dưới dạng " http://examole.com/randomview/images/2/dp_pics/182328.jpg " (ví dụ ngẫu nhiên)

Lưu ý: Trong phản ứng, bạn có thể đặt biểu thức javascript bên trong dấu ngoặc nhọn. Chúng ta có thể sử dụng tài sản này trong ví dụ này.
Lưu ý: đưa ra một cái nhìn vào ví dụ dưới đây:

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

  }
}

Đây là Tùy chọn tốt nhất cho Tên lớp hoặc Đạo cụ động, chỉ cần thực hiện một số phép nối giống như chúng ta làm trong Javascript.

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

bạn có thể dùng

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

hoặc là

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

hoặc là

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