如何使 typescript 中的自定義和可重用表組件做出反應？

Question

我想為每個 function 制作一個可重復使用的表組件我面臨重新分級列和行的問題如何每次為每個表傳遞不同的數據和列？

目前我已經為每個表創建了組件，如果我有類似的表，我不想做我如何將不同的數據和列傳遞給另一個表？

<Table
          className="vmsb-table mission-table"
          //   rowClassName={(record, index) => record.type}
          scroll={{ x: "max-content", y: 600 }}
          columns={missionColumns}
          dataSource={missionData}
          pagination={{
            className: "list-pagination",
            total: 85,

            defaultPageSize: 10,
            defaultCurrent: 1,
          }}
          expandable={{
            expandedRowRender,

            rowExpandable: (record) => record.name !== "Not Expandable",
            expandIcon: ({ expanded, onExpand, record }) =>
              expanded ? (
                <div className="icon-wrapper">
                  <i
                    className="icon-table-arrow-down"
                    style={{
                      fontSize: "9px",
                      width: "16px",
                      cursor: "pointer",
                    }}
                    onClick={(e) => onExpand(record, e)}
                  />
                </div>
              ) : (
                <div className="icon-wrapper">
                  <i
                    className="icon-table-arrow-right"
                    style={{ width: "16px", cursor: "pointer" }}
                    onClick={(e) => onExpand(record, e)}
                  />
                </div>
              ),
          }}
        />

Answer 1

我不確定我是否理解這個問題......為什么你不簡單地嘗試：

const MyTable = ({missionColumns, missionData}) => {
     return <Table
          className="vmsb-table mission-table"
          //   rowClassName={(record, index) => record.type}
          scroll={{ x: "max-content", y: 600 }}
          columns={missionColumns}
          dataSource={missionData}
          ...etc...
     </Table>
}

用法：

<MyTable missionColumns={yourcolumns} missionData={yourdata} />