Question

我有一个React组件，它将根据Ajax调用的数据呈现一个表。可能只有一行数据，或者可能最多有N行（不是很大，但是有限制）。

使用react-bootstrap，如何根据我从this.state.data获得的数据创建表格？

这是来自班级render的一些示例代码。我将如何根据阵列的长度填充单个单元格？

该数组包含我希望填充的每一行的对象，其数据与Name和Address以及Age（仅作为示例）相对应。如何以适当的数量填充<td>？它可能在1到N之间。

render : function () {


        let personArray = []; // Array containing objects that each match the three columns I wish to populate. 


        for(let i = 0; i < personArray.length; i++){
            console.log(personArray[i]); // Prints correctly each object with three value key pairs inside
        }

        const popoverLeft = (

            <Popover id="popover-positioned-left" title="Country name">
                <Table striped bordered condensed hover>
                    <thead>
                    <tr>
                        <th>Name</th>
                        <th>Address</th>
                        <th>Age</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        // Goes on .. 
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        // Goes on .. 
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        // Goes on .. 
                    </tr>
                    </tbody>
                </Table>
            </Popover>
        );

        return(
            <div>
                <OverlayTrigger trigger="click" placement="right" overlay={popoverLeft}>
                    <div>
                    </div>
                </OverlayTrigger>
            </div>
        )

Answer 1

您可以这样做：

在渲染中：

<Table striped condensed hover>
  <thead>
    <tr>
      <th></th>
      <th>Name</th>
      <th>Address</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    {personArray.map(this.renderPerson)}
  </tbody>
</Table>

你的renderPerson函数：

renderPerson(person, index) {
  return (
    <tr key={index}>
      <td>{person.name}</td>
      <td>{person.address}</td>
      <td>{person.age}</td>
    </tr>
  )
}

map函数将迭代数组并返回一个新的元素数组进行渲染。

如何动态地将数组添加到react-bootstrap表？

1 个答案: