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

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

1 个答案: