从 1d 数组在 bootstrap 中动态创建行

Question

我有一个列名数组，我正在尝试动态创建一个包含 2 列（名称和类型）的 table。 "Name" 将是列的名称，"type" 将是一个下拉按钮 select 一个类型（稍后实现，现在只想打印一个按钮）。

这是我目前的代码，它根本不起作用，我收到“解析错误：相邻的 JSX 元素必须包含在封闭标记中”。

列示例，我正在使用以下代码加载它：

const [cols, setCols] = useState(null);
d3.csv('/test.csv').then(data -> setCols(data.columns));

console.log(cols);
["name", "address", "zip", "number", ...]

<ReactBootstrap.Table striped bordered hover>
  <thead>
    <tr>
      <th>Column</th>
      <th>Import As</th>
    </tr>
  </thead>
  <tbody>
    {
      cols.map((col) => (
        <td><p>{col}</p></td>
        <td><div><button>Skipped</button></div></td>
      ))
    }
  </tbody>

已修复，更改如下：

const [cols, setCols] = useState([]);

cols.map((col) => (
    <Fragment>
        <tr>
          <td><p>{col}</p></td>
          <td><div><button>Skipped</button></div></td>
        </tr>
    </Fragment>
))

Answer 1

尝试用 Fragment 标签包装您返回的 HTML 的内容：

cols.map((col) => (
    <Fragment>
        <td><p>{col}</p></td>
        <td><div><button>Skipped</button></div></td>
    </Fragment>
))

从 1d 数组在 bootstrap 中动态创建行

Dynamically create rows in react bootstrap from 1d array

javascript

reactjs

react-bootstrap