Reactjs 如何使用<；TableRow/>；，分手<；表/>；蚂蚁设计中的组件

我想为Ant Design表中的行创建一个组件，其中每个组件都有自己的状态，并基于该表显示行。可能吗

如果可能的话，我怎么做？举个例子会很有帮助

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

在item.js中

import React，{Component}来自“React”；
从“antd”导入TableRow；
类项扩展组件{
建造师（道具）{
超级（道具）；
}
数据源=[
{
关键：“1”，
详情：“测试”，
价格:50
}
];
render（）{
返回；
}
}
导出默认项；

和在itemlist.js中

import React，{Component}来自“React”；
从“antd”导入{Table}；
从“/Item”导入项目；
类ItemList扩展组件{
建造师（道具）{
超级（道具）；
}
列=[
{
标题：“项目详细信息”，
数据索引：“详细信息”，
关键：“细节”
},
{
标题：“价格”，
数据索引：“价格”，
关键词：“价格”
}
];
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} />
    );
  }
}

类ItemList扩展组件{
数据源=[
{
关键：“1”，
详情：“测试”，
价格:50
}
];
列=[
{
标题：“项目详细信息”，
数据索引：“详细信息”，
呈现：（文本、记录、索引）=>
关键：“细节”
}
];
render（）{
返回(
);
}
}

---

如果您不需要基于数据显示某些行，您可以相应地筛选

数据源。
继续，什么阻止了您？@Alex我该怎么做？。如果可以，请提供一个非常有用的示例或一些链接。您描述得非常好-只需创建内部组件并在其中定义
getDerivedStateFromProps
，它将跟踪从表传递的props。另外，您需要首先提供自己的尝试，只有这样我才能帮助您解决您面临的特定问题。@Alex到目前为止，我已经编辑并提供了我的尝试，请为我提供一些解决方法。现在更清楚了，但仍然不清楚每行需要定义什么。此外，
数据源
应应用于
表
，以及
列
。
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;

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} />
    );
  }
}