React 嵌套循环和键

Question

我正在尝试让一些 React 代码正常工作，但我正在努力处理条件渲染。以下：

      <div id="table_holder" className="table-responsive mx-3">
        <table className="table-sm">
          {Tables.map((tableRows, index) => (
            <thead key={'headeer'+index.toString()}><tr key={index.toString()}>
            {tableRows.map((tableRow, i) => (
              <th key={i.toString()}>
                {i}
              </th>
            ))}
            </tr></thead>
          ))}
        </table>
      </div>
      );

有效，但我想根据对象 table 行中键 'type' 的值有条件地显示不同的 table 单元格。而且似乎无法管理正确的语法

谢谢

Answer 1

您的第一个循环没有为 div 分配唯一键。这可能是问题所在。尝试像这样给钥匙。

<key={index}>

 <table className="table-sm">
          {Tables.map((tableRows, index) => (
            <key={index}>
            {tableRows.map((tableRow, i) => (
              <th key={i+index.toString()}>
                {i}
              </th>
            ))}
            </>
          ))}
        </table>

更新 2

这是在 React 中使用条件渲染的方法。

  var tableRow = [1, 2, 4, 6, 7];
  return (
    <div className="App">
      <h1>Your React App</h1>
      {tableRow.map((table, index) => {
        if (table % 2) {
          return <div key={index}>{table}</div>;
        }
      })}
    </div>
  );

React 嵌套循环和键

React Nested Loops and Keys

loops

reactjs

conditional-rendering