如何将 id 传递给 React Js 中表中的每个 <td>？

Posted 2023-03-12

【中文标题】如何将 id 传递给 React Js 中表中的每个 <td>？

【英文标题】：How pass id to each <td> in table in React Js?

【发布时间】：2021-04-28 19:20:23

【问题描述】：

每个人。我正在尝试将 id 传递给表中的每个 td 以获取通过 API 接收的数据，以便每个表数据单元格都有自己的 id。到目前为止，代码看起来像这样

CodeSandbox

const normalizeData = (data) => 
  var items = Object.values(data)[0];

  var createOrEdit = (acc, key, value) => 
    var findItem = acc.find((r) => r[key] !== undefined);
    if (findItem === undefined) acc.push( [key]: [value] );
    else findItem[key].push(value);

    return acc;
  ;

  var result = items.reduce((acc, curr) => 
    createOrEdit(acc, "Name", curr.name);
    createOrEdit(acc, "Last Name", curr.last_name);
    createOrEdit(acc, "Age", curr.age);
    createOrEdit(acc, "Occupation", curr.Occupation);

    return acc;
  , []);

  return result;
;

export default function App() 
  const data = 
    people: [
      
        id: "1",
        name: "John",
        last_name: "Doe",
        age: "25",
        Occupation: "driver"
      ,
      
        id: "2",
        name: "Jack",
        last_name: "Brown",
        age: "24",
        Occupation: "it"
      ,
      
        id: "3",
        name: "Oliver",
        last_name: "Black",
        age: "30",
        Occupation: "cto"
      
    ],

    format:  last_name: "Last Name" 
  ;

  var renderData = (items) =>
    items.map((r) => 
      var key = <td>Object.keys(r)[0]</td>;
      var values = Object.values(r)[0].map((v) => <td>v</td>);
      return (
        <tr>
          key
          values
        </tr>
      );
    );
  return (
    <div className="App">
      <table>
        <tbody>renderData(normalizeData(data))</tbody>
      </table>
    </div>
  );

结果如下：

Name           John   Jack    Oliver
Last Name       Doe   Brown    Black
Age             25     24       30
Occupation      driver  it     cto

我需要将 API 数据中的 id 传递给所有具有相同 id 的 td-s，例如：

<td id="1">John </td>  
<td id="1">Doe </td>      
<td id="1">25    <td/>  
<td id="1">driver </td>

<td id="2">Jack </td>
<td id="2">Brown </td>
<td id="2">24 </td>
<td id="2">it </td>

我需要实现这一点，例如，当我选择 id 1 时，将包含所有 id:1 的 td 单元格。

我对 React 和 javascript 还很陌生，所以我找不到实现它的方法。非常感谢任何帮助和建议。谢谢。

【问题讨论】：

那是无效的 html，元素 ID 必须是唯一的。您拥有做出渲染决策所需的数据，无需将其编码到 HTML 中以对其进行过滤。而是在渲染时使用它，当过滤器发生变化时，React 会渲染不同的项目......这就是 React 背后的整体理念。

@dpwrussell，您好，感谢您的回复。我明白了，那么在这种情况下我该如何操作数据呢？例如，如果我需要选择 id:1 的所有数据？谢谢。

使用useState 存储您的数据。还存储您的过滤器是什么，在这种情况下是某种选择。然后使用选择只选择要渲染的有效项目并仅渲染这些项目。 React 负责其余的工作。

@dpwrussell，我理解这个想法，但我是新手，恐怕我自己无法创建这样的功能。如果不是很麻烦，你能分享一些例子吗？

【参考方案1】：

你的代码是这样设置的：

var values = Object.values(r)[0].map((v, **idx**) => (
    <td **className=idx**>v</td>
  ));

但我认为您应该在数据中包含索引，而不是依赖数组索引。

【讨论】：

@SSDMan，您好，感谢您的回复。我需要从 API 数据中传递 id，因此当我将更改应用于例如 id:1 时，

中具有相同 id 的所有数据都会更改。

【参考方案2】：

const [tableData, setTableData] = useState(data);

.....

// any logic that change data
...
setTableData(modifiedData);


....
renderData(normalizeData(tableData))

使用 react，只要有状态变化，它就会重新渲染，所以每当你修改数据后，setTableData 将设置新的状态和数据到tableData，它会再次调用renderData(normalizeData(tableData))

编辑：如果你真的想给所有td一个id，不要使用id，在html中使用data属性，比如data-id，你可以搜索更多关于data属性的信息

【讨论】：

嗨，我只需要将数据 Api 中的 id 传递给每个

单元格，因此当我在代码中的某处对 id 应用更改时，所有具有相同 id 的数据都会更改。我不需要单击行本身。