Question

我正在尝试使用react创建数据表。我能够在表格中正确显示作为道具传递的对象的数据。但是，所有数据都显示在表的第一列中，而不是分布在所有列中。

我在App.js中传递的道具如下：

const obj = [
  {
    date: "2019-04-17",
    spend: 100,
    preloads: 111.43,
    installs: 100
  },
  {
    date: "2019-04-16",
    spend: 200,
    preloads: 911.43,
    installs: 200
  },
  {
    date: "2019-04-15",
    spend: 300,
    preloads: 9211.43,
    installs: 300
  }
];

我正在使用以下方法在App.js中进行渲染：

<MetricsTable data={obj}/>

我的MetricsTable.js组件文件如下：

import React from "react";
import { Table } from "react-bootstrap";

class TableRow extends React.Component {
  render() {
    const { data } = this.props;
    const row =
      this.props.data &&
      data.map(data => (
        <tr>
          <td>{data.date}</td>
          <td>{data.spend}</td>
          <td>{data.preloads}</td>
          <td>{data.installs}</td>
        </tr>
      ));
    return <div>{row}</div>;
  }
}

class MetricsTable extends React.Component {
  render() {
    return (
      <div>
        <Table striped bordered hover size="sm">
          <thead>
            <tr>
              <th>Date</th>
              <th>Spend ($)</th>
              <th>Preloads</th>
              <th>Installs</th>
            </tr>
          </thead>
          <tbody>
            <TableRow data={this.props.data && this.props.data} />
          </tbody>
        </Table>
      </div>
    );
  }
}

export default MetricsTable;

但是，当我运行这段代码时，这就是数据的输出方式：

有人知道我如何在列标题中分布数据吗？

Answer 1

考虑使用功能组件代替TableRow。问题是标记不正确，因为每个<tr>都包含在<span>中。

export default function TableRow(props) {
  console.log(props);
  const { data } = props;
  return obj.map(data => (
    <tr>
      <td>{data.date}</td>
      <td>{data.spend}</td>
      <td>{data.preloads}</td>
      <td>{data.installs}</td>
    </tr>
  ));
}

将props对象的映射数组发布到数据表组件中

1 个答案: