如何在 react/js 中的 table 中将数组显示为单列

Question

我正在尝试验证 excel sheet 中所需列的空值，并尝试将结果显示为 table，列为 - 行号，空值列名。

由于一行中的许多列都可能具有空值，因此我将这些列存储为一个数组。

在 table 中显示时，我无法在元素中获取逗号分隔符。

关于如何在 table 中的单列 abc 中显示带有逗号分隔符的数组（如 [a,b,c,--] 的任何建议？

Presenting a sample code base 

export default function App() {
 const names = ["a", "b","c"];
  return (
    <div className="App">
      <table>
        <thead>
          <th>Names</th>
        </thead>
        <tbody>
          <td>{names}</td>
        </tbody>
      </table>
    </div>
  );
}

This is giving output as

Names
abc

Expecting output as

Names
a,b,c

Answer 1

您可以 join 带分隔符的数组，在这种情况下它应该是 ,;

CODESANDBOX

export default function App() {
  const names = ["a", "b", "c"];
  return (
    <div className="App">
      <table>
        <thead>
          <tr>
            <td>Names</td>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>{names.join(",")}</td>
          </tr>
        </tbody>
      </table>
    </div>
  );
}

如何在 react/js 中的 table 中将数组显示为单列

How to display an array as a single column in a table in react/js

javascript

arrays

html-table

reactjs