混合HTML和{this.props.foo}

Question

 var User = React.createClass({ 
      render: function() { 
       console.log("User"); 
       console.log(this.props); 

       return (
        <div className="user"> 
         <h2 className="userName"> 
          {this.props.name} 
         </h2> 
         <img src={this.props.avatarHash} alt="" width="100" height="100" /> 
        </div> 
       ); 
      } 
     }); 

如何在屬性中附加/混合HTML？ 我已經嘗試和失敗：

<img src="http://foo.bar/{this.props.avatarHash}" alt="" width="100" height="100" /> 
<img src="http://foo.bar/"{this.props.avatarHash} alt="" width="100" height="100" /> 

Answer 1

您可以使用Template literals

<img 
    src={ `http://foo.bar/${ this.props.avatarHash }` } 
    alt="" 
    width="100" 
    height="100" 
/> 

或字符串連接

<img 
    src={ 'http://foo.bar/' + this.props.avatarHash } 
    alt="" 
    width="100" 
    height="100" 
/>