Как сделать компонент используядля расставаниякомпонент в Ant Design

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

Я до сих пор не совсем понял ваши требования, но насколько я понимаю: вы можете определить 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 соответственно.