React에서 반복하기, 하위 구성 요소에서 prop.username을 가져 오는 방법

Question

친구 목록 블록을 렌더링하는이 코드가 있습니다. 이름 옆에 작업 드롭 다운 메뉴가 있습니다. 여기에는 여러 개의 버튼이 있으며 각 버튼을 분리하고 해당 버튼이 속한 사용자를 구분해야합니다. 지금까지는 작동하지만 모든 사용자 이름을 하나씩 출력합니다. onClick 알림 드롭 다운 메뉴를 선택하십시오. href를 누를 때 아무 것도 일어나지 않습니다.하지만 새 컨텐트가로드되면 경고 된 foreach 사용자가 표시됩니다.

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

Answer 1

내 실수는 내가 사용자 이름 기능에 보내려고했는데 이미있었습니다.

제가 그것이 prop.username를 대신

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

알림 기능을 추가

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