Question

我正在尝试使一些反应代码起作用，并在条件渲染方面苦苦挣扎。以下：

      <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>
      );

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

谢谢

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

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

  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>
  );

反应嵌套循环和键

1 个答案: