เข้าถึงอุปกรณ์ประกอบฉากภายในเครื่องหมายคำพูดใน 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}`} />

หากคุณกำลังใช้ JSX ด้วย Harmony คุณสามารถทำได้:

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

ที่นี่คุณกำลังเขียนค่าของsrcนิพจน์

แทนที่จะเพิ่มตัวแปรและสตริงคุณสามารถใช้สตริงเท็มเพลต ES6! นี่คือตัวอย่าง:

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

สำหรับองค์ประกอบ JavaScript อื่น ๆ ทั้งหมดภายใน JSX ให้ใช้สตริงเทมเพลตที่อยู่ในเครื่องหมายปีกกา ในการ "ฉีด" ตัวแปรใช้เครื่องหมายดอลลาร์ตามด้วยเครื่องหมายปีกกาที่มีตัวแปรที่คุณต้องการฉีด ตัวอย่างเช่น:

{`string ${variable} another string`}

แนวทางปฏิบัติที่ดีที่สุดคือการเพิ่มวิธีทะเยอทะยานสำหรับสิ่งนั้น:

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

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

จากนั้นหากคุณมีเหตุผลเพิ่มเติมในภายหลังคุณสามารถรักษารหัสได้อย่างราบรื่น

สำหรับผู้คนกำลังมองหาคำตอบที่เขียนถึงฟังก์ชั่น '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>
      );

  }
}

นี่คือตัวเลือกที่ดีที่สุดสำหรับ className แบบไดนามิกหรืออุปกรณ์ประกอบฉากเพียงทำการต่อกันอย่างที่เราทำใน 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>
    )
  }