यूआरएल और वर्ग

Question

साथ img टैग मुद्दा प्रतिक्रिया मैं निम्नलिखित सरल मेरी JSX फ़ाइल में कोड प्रतिक्रिया है:

/** @jsx React.DOM */ 

var Hello = React.createClass({ 
    render: function() { 
     return <div><img src='http://placehold.it/400x20&text=slide1' alt={event.title} class="img-responsive"/><span>Hello {this.props.name}</span></div>; 
    } 
}); 

React.renderComponent(<Hello name="World" />, document.body); 

डोम में उत्पादन किया जाता है इस प्रकार है:

<div data-reactid=".0"> 
    <img src="http://placehold.it/400x20undefined1" data-reactid=".0.0"> 
    <span data-reactid=".0.1"> 
    <span data-reactid=".0.1.0">Hello </span> 
    <span data-reactid=".0.1.1">World</span> 
    </span> 
</div> 

मैं दो मुद्दे हैं इसके साथ:

• छवि URL गलत तरीके से प्रदान की गई है, यह 'http://placehold.it/400x20undefined1'
के रूप में प्रदान की गई है
• मेरी छवि पर कक्षा

कोई विचार?

Answer 1

याद रखें कि आपके img वास्तव में एक डोम तत्व लेकिन एक जावास्क्रिप्ट अभिव्यक्ति नहीं है।

1. यह एक जेएसएक्स विशेषता अभिव्यक्ति है। Src स्ट्रिंग अभिव्यक्ति के चारों ओर घुंघराले ब्रेसिज़ रखें और यह काम करेगा। http://facebook.github.io/react/docs/jsx-in-depth.html#attribute-expressions

2. जावास्क्रिप्ट में देखें, वर्ग विशेषता className का उपयोग कर संदर्भ है। इस खंड में नोट देखें: http://facebook.github.io/react/docs/jsx-in-depth.html#react-composite-components

   /** @jsx React.DOM */ 
   
   var Hello = React.createClass({ 
       render: function() { 
        return <div><img src={'http://placehold.it/400x20&text=slide1'} alt="boohoo" className="img-responsive"/><span>Hello {this.props.name}</span></div>; 
       } 
   }); 
   
   React.renderComponent(<Hello name="World" />, document.body); 
   

Answer 2

var Hello = React.createClass({ 
    render: function() { 
     return (
     <div className="divClass"> 
      <img src={this.props.url} alt={`${this.props.title}'s picture`} className="img-responsive" /> 
      <span>Hello {this.props.name}</span> 
     </div> 
    ); 
    } 
});