ReactJS 如何实现动态列表仅最后一项显示加号添加按钮

你只需要在渲染加号按钮的位置补充条件判断，仅当当前行是列表最后一行时才渲染该按钮即可。

具体修改List组件中<AddCircleIcon>对应的代码段，原来的写法是每一行都会渲染加号：

<AddCircleIcon onClick={addRow} />

改为条件渲染即可：

{i1 === data.length - 1 && <AddCircleIcon onClick={addRow} />}

这里i1是遍历列表行时的当前行索引，data.length - 1就是列表最后一行的索引，两者相等时才会渲染加号按钮，其余行的加号就会自动隐藏。

修改后完整的List组件代码如下：

import React from "react";

import AddCircleIcon from "@material-ui/icons/AddCircle";
import RemoveCircleIcon from "@material-ui/icons/RemoveCircle";
import TextField from "@material-ui/core/TextField";

import "./styles.scss";

const List = ({ data, handleOnChange, addRow, removeRow }) => {
  return (
    <div className="container">
      {data.map((items, i1) => (
        <div key={i1} className="content">
          <div className="content-row">
            {items.map((item, i2) => (
              <TextField
                key={i2}
                label={item.label}
                value={item.value}
                onChange={(e) => handleOnChange(e, i1, i2)}
                variant="outlined"
                name={item.name}
              />
            ))}
          </div>
          <div>
            {/* 仅最后一行显示加号按钮 */}
            {i1 === data.length - 1 && <AddCircleIcon onClick={addRow} />}
            {data.length > 1 && (
              <RemoveCircleIcon onClick={() => removeRow(i1)} />
            )}
          </div>
        </div>
      ))}
    </div>
  );
};

export default List;

内容的提问来源于stack exchange，提问作者Tainara