在React中循環，如何從子組件中獲取prop.username

我有這段代碼，它呈現了一個Friends List塊。在名稱旁邊，有一個動作下拉菜單，其中有幾個按鈕，我需要分離每個按鈕以及它屬於哪個用戶。到目前爲止它工作正常，但輸出所有用戶名，一個接一個。在下拉菜單中檢查onClick警報。當我按下href時，沒有任何反應，但是，當新內容加載時，它會彈出alert foreach用戶列表。在React中循環，如何從子組件中獲取prop.username

var UserDropdownActions = React.createClass({ 
    handlesendMessage: function(username){ 
    console.log(username); 
    }, 
    render: function() { 
    return(
    <div className="tbl-cell tbl-cell-action"> 
      <div className="btn-group"> 
       <button type="button" className="btn btn-rounded btn-primary-outline dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
       Connect 
       </button> 
       <ul className="dropdown-menu"> 
       <li><a className="dropdown-item" href="javascript:;" onClick={alert(this.props.username)}><span className="font-icon font-icon-home"></span>Quant and Verbal</a></li> 
       <li><a className="dropdown-item" href="javascript:;"><span className="font-icon font-icon-cart"></span>Real Gmat Test</a></li> 
       <li><a className="dropdown-item" href="javascript:;"><span className="font-icon font-icon-speed"></span>Prep Official App</a></li> 
       <li><a className="dropdown-item" href="javascript:;"><span className="font-icon font-icon-users"></span>CATprer Test</a></li> 
       <li><a className="dropdown-item" href="javascript:;"><span className="font-icon font-icon-comments"></span>Third Party Test</a></li> 
       </ul> 
      </div> 
     </div> 
     ); 
    } 
}) 
var UserDisplayNameFields = React.createClass({ 
    render: function(){ 
    return(
     <div className="tbl-cell"> 
      <p className="user-card-row-name status-online">{this.props.username}</p> 
      <p className="user-card-row-location">{this.props.hobby}</p> 
     </div> 
    ); 
    } 
}); 
var UserPreviewCircularImage = React.createClass({ 
    render: function(){ 
    return(
     <div className="tbl-cell tbl-cell-photo thumbnail-wrapper d32 circular inline m-t-5"> 
     <a href={"/user/" + this.props.username}> 
      <img src={this.props.avatar} alt={this.props.username} /> 
     </a> 
     </div> 
    ); 
    } 
}); 

var UserSmallView = React.createClass({ 
    render: function() { 
    return (
     <div className="friends-list-item"> 
      <div className={"user-card-row user_" + this.props.username}> 
      <div className="tbl-row"> 
       <UserPreviewCircularImage avatar={this.props.avatar} username={this.props.username} /> 
       <UserDisplayNameFields username={this.props.username} hobby={this.props.hobby} /> 
       <UserDropdownActions username={this.props.username} /> 
      </div> 
      </div> 
     </div> 
    ); 
    } 
}); 

var FriendList = React.createClass({ 
    render: function() { 

    return ( 
    <div className="friends-list"> 
    { 
     this.props.users.map((user, i) => { 
     return(
     <UserSmallView 
      key={i} 
      username={user.username} 
      hobby={user.hobby} 
      avatar={user.avatar} /> 
     ) 
     }) 
    } 
    </div> 
    ); 
    } 
});

來源

2016-07-27 DecoderNT

我的錯誤是我試圖發送到函數的用戶名，但它已經在那裏。

我增加它提醒prop.username

handlesendMessage: function(){ 
    alert(this.props.username); 
},

而不是函數，

handlesendMessage: function(username){ 
    alert(username); 
}

來源

2016-07-27 10:32:35 DecoderNT

在React中循環，如何從子組件中獲取prop.username

回答

相關問題