Question

我是React的新手。

我有包含文本A的用户列表，当我onMouse输入文本A时，应将文本A替换为B，然后在onMouseLeave上再次将文本移至A。

handleCloseButton(action,id,cb){
  if(action == "show"){
    return (Helper.CloseButton())
  }else{
    return (Helper.TimeAgo())
  }
}

{
  this.props.leadLists.map(function(lead){
    return(
      <li key={"Lead_"+lead._id} onMouseEnter={() => that.handleCloseButton("show",lead._id,that.closeButtonClick)} onMouseLeave={() => that.handleCloseButton("hide",lead._id,Date())}>
        <div className="imgbar">
          <Image directory={"users"} source={"4.jpg"} key={"LeadImage_"+lead._id} />
          <h3><Link onClick={(e)=>that.props.funLeadDetails(lead,e)} to={`/all-conversations/${lead._id}`}> {lead.first_name} {lead.middle_name} {lead.last_name} </Link></h3>
          <div className="mm" id={"CloseButton_TimeAgo_" + lead._id}>
            {that.handleCloseButton("hide",lead._id,that.closeButtonClick)}
          </div>
          <div className="post-dropdown">
            <div className="dropdown">
              <a className="btn btn-default dropdown-toggle" role="button" id="dropdownMenu5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <Image directory={"users"} source={"4.jpg"} key={"4.jpg"} />
              </a>
              <div className="dropdown-menu newest-drop" aria-labelledby="dropdownMenu5">
                {that.props.usersLists}
              </div>
            </div>
            <div className="icon">{lead.discription}</div>
          </div>
        </div>
      </li>
    );
  })
}

我尝试过，但是如果我使用State，它会为所有用户更新相同的内容，如果我使用ReactDOM渲染，则会以不好的方式给出警告。

Answer 1

为避免它同时更新所有名称，应将其设为一个单独的组件，这样每个“名称”都将具有其自己的组件状态，因此只能更改一个。

因此，最后，您将映射到this.props.leadlists，以为数组的每个元素生成新组件。

那将是最简单的解决方案。只是

<li key={"Lead_"+lead._id} onMouseEnter={() => that.handleCloseButton("show",lead._id,that.closeButtonClick)} onMouseLeave={() => that.handleCloseButton("hide",lead._id,Date())}>
        <div className="imgbar">
          <Image directory={"users"} source={"4.jpg"} key={"LeadImage_"+lead._id} />
          <h3><Link onClick={(e)=>that.props.funLeadDetails(lead,e)} to={`/all-conversations/${lead._id}`}> {lead.first_name} {lead.middle_name} {lead.last_name} </Link></h3>
          <div className="mm" id={"CloseButton_TimeAgo_" + lead._id}>
            {that.handleCloseButton("hide",lead._id,that.closeButtonClick)}
          </div>
          <div className="post-dropdown">
            <div className="dropdown">
              <a className="btn btn-default dropdown-toggle" role="button" id="dropdownMenu5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <Image directory={"users"} source={"4.jpg"} key={"4.jpg"} />
              </a>
              <div className="dropdown-menu newest-drop" aria-labelledby="dropdownMenu5">
                {that.props.usersLists}
              </div>
            </div>
            <div className="icon">{lead.discription}</div>
          </div>
        </div>
      </li>

并使其成为一个新组件，以便它们各自具有各自的状态。

在列表中交换元素而没有状态reactjs

1 个答案: