Question

我目前正在为一个大学项目构建一个客户端管理系统Web应用程序。在其中，我有一个用户个人资料组件，用户可以在其中查看其信息（例如公司名称，名字），并在单击该信息时对其进行编辑。我想简化它，因为我认为它写得不好并且令人困惑。我希望就如何进行此操作提供一些意见。

这是我现在的操作方式：

{
  data.length <= 0
  ? <IsLoading />
  : data.filter(data => data._id === projectId).map(data => (
    <div key={data.id} className="viewUser">
      <div className="viewUserHeading">
        <div id="viewBoxHeading" className="viewUserContactView">
          <div
            onClick={() => this.editUser(data.id, 41)}
            className="viewUserContactViewLink"
          >
            <h2 className="viewUserContactViewData">{data.name}</h2>
            <FeatherIcon className="viewUserContactViewLinkEdit" icon="edit" />
          </div>
      </div>
      <div id="editBoxHeading" className="viewUserContactEdit">
          <Input 
            type="text"
            onChange={e => this.setState({ updateToApply: e.target.value, updateCurrent: data.name, updateToField: "name" })}
            placeholder={data.name}
          >         
          </Input>
          <FeatherIcon 
            color="success" 
            className="viewUserContactCheck" 
            icon="check"
            onClick={() => this.editUser(data.id, 42)} 
          />
        </div>               
      </div>
    ))
  }

在这种情况下，它显示名称，当我单击它时，我可以对其进行编辑和更改。我已经为每个数据值（因此5）完成了此操作，并为每个数据使用了不同的ID。

我希望在当前循环中实现这样的目标

data.foreach(data.value) {
  <div className={data.id}>
    {data.field: data.value}
</div>
}

这样，我可以自动执行功能并清理一半的组件。对此有任何意见或建议，将是很棒的。

预先感谢

在ReactJS中循环内循环

0 个答案: