在React中循环，如何从子组件获取prop.username

I have this code, which renders a Friends List block. Next to the name, there is an action dropdown menu, where there are several buttons, i need to seperate each button and on which user it belongs. So far it works, but outputs all the usernames, one by one. Check on the dropdown menu the onClick Alert. There when i press the href, nothing happens, though, when new content loads, it pops up alert foreach user listed.

我有这个代码,它呈现一个好友列表块。在名称旁边有一个动作下拉菜单,其中有几个按钮,我需要分隔每个按钮以及它所属的用户。到目前为止它可以工作,但逐个输出所有用户名。在下拉菜单中检查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>
    );
  }
});

1 个解决方案

#1

My mistake was that i was trying to send to the function the username, though, it was already there.

我的错误是我试图向函数发送用户名,但它已经存在了。

i added a function where it alerts the prop.username

我添加了一个警告prop.username的函数

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

instead of,

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

#1