React JSX'teki tekliflerin içindeki desteklere erişin

JSX'te, propsalıntılanan öznitelik değerinin içinden bir değere nasıl başvuruyorsunuz ?

Örneğin:

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

Ortaya çıkan HTML çıktısı:

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

React (veya JSX), bir öznitelik değeri içinde değişken enterpolasyonu desteklemez, ancak herhangi bir JS ifadesini öznitelik değerinin tamamına öznitelik değeri olarak koyabilirsiniz, bu nedenle:

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

Es6 şablon değişmez değerlerini kullanmak istiyorsanız, onay işaretlerinin etrafında da parantez gerekir:

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

Harmony ile JSX kullanıyorsanız, bunu yapabilirsiniz:

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

Burada srcbir ifade olarak değerini yazıyorsunuz .

Değişkenler ve dizeler eklemek yerine ES6 şablon dizelerini kullanabilirsiniz! İşte bir örnek:

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

JSX içindeki diğer tüm JavaScript bileşenlerine gelince, süslü parantezlerin içindeki şablon dizelerini kullanın. Bir değişkeni "enjekte etmek" için dolar işareti ve ardından enjekte etmek istediğiniz değişkeni içeren süslü parantez kullanın. Örneğin:

{`string ${variable} another string`}

Bunun için en iyi uygulamalar getter yöntemini eklemektir:

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

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

Daha sonra daha fazla mantığınız varsa, kodu sorunsuz bir şekilde koruyabilirsiniz.

İnsanlar için 'harita' fonksiyonu ve dinamik veri cevapları arayan, işte çalışan bir örnek.

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

Bu URL'yi " http://examole.com/randomview/images/2/dp_pics/182328.jpg " olarak verir (rastgele örnek)

Not: Reaksiyonda javascript ifadesini kıvırcık parantez içine alabilirsiniz. Bu özelliği bu örnekte kullanabiliriz.
Not: aşağıdaki örneğe bir göz atın:

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

  }
}

İşte Dinamik className veya Props için En İyi Seçenek, sadece Javascript'te yaptığımız gibi birleştirme yapın.

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

kullanabilirsiniz

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

veya

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

veya

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