如何使一个组件使用 ，分手 component in Ant Design

Question

我想使一个组件在蚂蚁设计表中的行，其中每个组件都有自己的状态，并基于该表行将被显示。可能吗？

如果可能的话我该怎么办呢？一个例子是有帮助的。

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

在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定义column definition，在那里你会得到一个行项目：

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。