Phản ứng vấn đề thẻ img với url và lớp

Question

Tôi có đơn giản sau đây phản ứng mã trong tập tin JSX tôi:

/** @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); 

Sản lượng trong DOM được như sau:

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

Tôi có hai vấn đề với nó:

• URL hình ảnh được render không đúng cách, nó được trả lại như 'http://placehold.it/400x20undefined1'
• Lớp học trên hình ảnh của tôi biến mất

Bất kỳ ý tưởng nào?

Answer 1

Hãy nhớ rằng img của bạn không thực sự là phần tử DOM mà là biểu thức javascript.

1. Đây là biểu thức thuộc tính JSX. Đặt dấu ngoặc nhọn xung quanh biểu thức chuỗi src và nó sẽ hoạt động. Xem http://facebook.github.io/react/docs/jsx-in-depth.html#attribute-expressions

2. Trong javascript, thuộc tính lớp là tham chiếu sử dụng className. Xem các lưu ý trong phần này: 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> 
    ); 
    } 
});