我想制作一個表的組件，它可以為我面臨的每個功能重用重新排序列和行我如何每次為每個表傳遞不同的資料和列？
目前我已經為每個表創建了組件，如果我有類似的表，我不想這樣做，我如何將不同的資料和列傳遞給另一個？
<Table
className="v-table m-table"
// rowClassName={(record, index) => record.type}
scroll={{ x: "max-content", y: 600 }}
columns={mColumns}
dataSource={mData}
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>
),
}}
/>
uj5u.com熱心網友回復：
我不確定我是否理解這個問題......為什么你不簡單地嘗試：
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} />
關于你的第二個問題，你可以以同樣的方式傳遞一個樣式屬性，es：
const YourComponent = ({displayValue}) => {
return <div style={{display:displayValue}} />
}
用法：
<YourComponent displayValue="none" />
或者如果你想傳遞整個樣式：
const YourComponent = ({style}) => {
return <div style={{...style}} />
}
用法：
<YourComponent style={{display:'none', margin:'4px' etc...}} />
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/365437.html
標籤：javascript 反应 打字稿