प्रतिक्रिया जेएसएक्स में उद्धरण के अंदर पहुंच सहारा

295

JSX में, आप propsएक उद्धृत विशेषता मान के अंदर से मान का संदर्भ कैसे देते हैं?

उदाहरण के लिए:

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

परिणामी HTML आउटपुट है:

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

javascript reactjs react-props

— cantera
स्रोत

476

प्रतिक्रिया (या JSX) विशेषता मान के अंदर परिवर्तनशील चर का समर्थन नहीं करता है, लेकिन आप संपूर्ण विशेषता मान के रूप में घुंघराले ब्रेस के अंदर कोई भी जेएस अभिव्यक्ति डाल सकते हैं, इसलिए यह काम करता है:

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

— सोफी अल्परट
स्रोत

26

es6 में backtips के बारे में क्या?

— डेविड लावेरी

1

@DavidLavieri क्रिस्टी का जवाब देखें stackoverflow.com/a/30061326/70345 नीचे।

— इयान केम्प

235

यदि आप es6 टेम्पलेट शाब्दिक का उपयोग करना चाहते हैं, तो आपको टिक चिह्नों के साथ ब्रेसिज़ की भी आवश्यकता है:

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

— Cristi
स्रोत

भावी ES6 टेम्प्लेट शाब्दिक

— zloctb

1

बैकटिक्स द्वारा संलग्न स्ट्रिंग एक "टेम्पलेट शाब्दिक" है: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

— जॉन श्नाइडर

47

यदि आप सद्भाव के साथ JSX का उपयोग कर रहे हैं, तो आप ऐसा कर सकते हैं:

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

यहां आप srcएक अभिव्यक्ति के रूप में मूल्य लिख रहे हैं ।

— user3089094
स्रोत

1

यह कुछ ऐसा है जिसे खोजना मुश्किल है। और पुन: प्रयोज्य कंटेनरों के लिए यह एक जरूरी पता है

— होम्स

2

बस इतना है कि लोग सद्भाव के उल्लेख के साथ भ्रमित नहीं होते हैं, यह ईएस 6 मानक का एक हिस्सा है , जबकि उत्तर मानक होने से कुछ महीने पहले दिनांकित है।

— Сергей Гринько

12

चर और तार जोड़ने के बजाय, आप ES6 टेम्पलेट तार का उपयोग कर सकते हैं! यहाँ एक उदाहरण है:

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

JSX के अंदर अन्य सभी जावास्क्रिप्ट घटकों के लिए, घुंघराले ब्रेसिज़ के अंदर टेम्पलेट स्ट्रिंग्स का उपयोग करें। "इंजेक्ट" करने के लिए एक चर एक डॉलर चिह्न का उपयोग करता है जिसके बाद घुंघराले ब्रेसिज़ होते हैं जिसे आप इंजेक्ट करना चाहते हैं। उदाहरण के लिए:

{`string ${variable} another string`}

— साहिल
स्रोत

8

इसके लिए सबसे अच्छा तरीका यह है कि गटर विधि को जोड़ा जाए:

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

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

फिर, यदि आपके पास बाद में अधिक तर्क हैं, तो आप कोड को सुचारू रूप से बनाए रख सकते हैं।

— अब्देनूर TOUMI
स्रोत

2

लोगों के लिए, 'मैप' फ़ंक्शन और डायनामिक डेटा के लिए उत्तर की तलाश में, यहां एक कार्यशील उदाहरण है।

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

यह URL को " http://examole.com/randomview/images/2/dp_pics/182328.jpg " (रैंडम उदाहरण) देता है।

— राम
स्रोत

1

नोट: प्रतिक्रिया में आप घुंघराले ब्रैकेट के अंदर जावास्क्रिप्ट अभिव्यक्ति डाल सकते हैं। हम इस उदाहरण में इस संपत्ति का उपयोग कर सकते हैं।
नोट: नीचे दिए गए उदाहरण को एक रूप दें:

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

  }
}

— किरण
स्रोत

1

यहां डायनामिक क्लासनेम या प्रॉप्स के लिए बेस्ट ऑप्शन है, बस कुछ कॉन्सेप्टेशन करें जैसे हम जावास्क्रिप्ट में करते हैं।

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

— साद मिर्ज़ा
स्रोत

मैं classnamesगतिशील क्लासनेम के निर्माण के लिए पैकेज का उपयोग करने की सलाह देता हूं

— डेविड लविएरी

1

आप उपयोग कर सकते हैं

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

— अली मोहम्मद
स्रोत