Question

我想为Ant Design Table中的行制作一个组件，其中每个组件将具有自己的状态，并根据该表显示行。有可能吗？

如果可以的话我该怎么办？一个示例会有所帮助。

我尝试了以下示例，但显示的是“无数据”

在item.js中

import React, { Component } from "react";
import TableRow from "antd";

class Item extends Component {
  constructor(props) {
    super(props);
  }

  dataSource = [
    {
      key: "1",
      details: "test",
      price: 50
    }
  ];

  render() {
    return <TableRow dataSource={this.dataSource} />;
  }
}
export default Item;

和itemlist.js

import React, { Component } from "react";
import { Table } from "antd";
import Item from "./item";

class ItemList extends Component {
  constructor(props) {
    super(props);
  }

  columns = [
    {
      title: "Item Details",
      dataIndex: "details",
      key: "details"
    },
    {
      title: "Price",
      dataIndex: "price",
      key: "price"
    }
  ];

  render() {
    return (
      <Table column={this.columns}>
        <Item key="1" />
      </Table>
    );
  }
}

export default ItemList;

Answer 1

我仍然没有完全满足您的要求，但是据我了解：您可以在column definition中定义render，然后您将获得一个行项目：

class ItemList extends Component {
  dataSource = [
    {
      key: "1",
      details: "test",
      price: 50
    }
  ];

  columns = [
    {
      title: "Item Details",
      dataIndex: "details",
      render: (text, record, index) => <Item {...record} />  
      key: "details"
    }
  ];

  render() {
    return (
      <Table columns={this.columns} dataSource={this.dataSource} />
    );
  }
}

如果只需要不显示基于数据的行，则可以相应地过滤dataSource。

如何使用<tablerow>制作组件，以在Ant Design中分解组件

1 个答案: