Reactjs 交换列表中不带状态的元素

我是新来的

我有一个有文本A的用户列表，当我在onMouseEnter上输入文本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>
    );
  })
}

handleCloseButton（操作、id、cb）{
如果（操作==“显示”）{
返回（Helper.CloseButton（））
}否则{
返回（Helper.TimeAgo（））
}
}
{
this.props.leadLists.map（函数（lead）{
返回(
that.handleCloseButton（“show”，Lead.id，that.closeButtonClick）}onMouseLeave={（）=>that.handleCloseButton（“hide”，Lead.id，Date（））}>
that.props.funLeadDetails（lead，e）}to={`/所有对话/${lead.\u id}`>{lead.first\u name}{lead.middle\u name}{lead.last\u name}
{that.handleCloseButton（“隐藏”，lead.\u id，that.closeButton单击）}
{that.props.usersLists}
{lead.description}

);
})
}

---

我试过了，但如果我使用State，它会对所有用户进行更新，如果我使用ReactDOM render，它会发出警告，指出这不是一个好方法。

为了避免它同时更新所有名称，你应该将它作为一个单独的组件，这样每个“名称”都会有自己的组件状态，所以它只会更改一个

因此，最终您将映射到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>

that.handleCloseButton（“show”，Lead.id，that.closeButtonClick）}onMouseLeave={（）=>that.handleCloseButton（“hide，Lead.id，Date（））}>
that.props.funLeadDetails（lead，e）}to={`/所有对话/${lead.\u id}`>{lead.first\u name}{lead.middle\u name}{lead.last\u name}
{that.handleCloseButton（“隐藏”，lead.\u id，that.closeButton单击）}
{that.props.usersLists}
{lead.description}

---

并使其成为一个新的组件，以便每个组件都有自己的状态。

您可以将其作为此组件进行维护。instancevariable，对吗？并且不使用setState进行重新招标。