我有多個具有相同類名和具有不同引數的方法我想將以下代碼重構為更簡單的方式任何建議都會有所幫助。
<table class="greyGridTable">
<tbody>
<tr>
<td>AA</td>
<td className = 'table-container'>{formatDate(someMethod1(param1,a)}</td>
</tr>
<tr>
<td>BB</td>
<td className = 'table-container'>{formatDate(someMethod1(param1,b)}</td>
</tr>
<tr>
<td>CC</td>
<td className = 'table-container'>{formatDate(someMethod1(param1,c)}</td>
</tr>
</tbody>
</table>
我想用相同的組件重構代碼。
uj5u.com熱心網友回復：
我希望這會有所幫助。謝謝
export const TableItems = ({data}) => {
return (
<>
{data.map(item => (
<tr>
<td>{item.name}</td>
<td className='table-container'> {item?.symbol} {formatDate(someMethod1(param1,a)}</td>
</tr>
))}
</>
)
}
const data = [
{
name: AA,
},
{
name: BB,
},
{
name: CC,
symbol: '￡'
}
]
<table class="greyGridTable">
<tbody>
<TableItems data={data} />
</tbody>
</table>
uj5u.com熱心網友回復：
嘗試改用陣列。在陣列中擁有可重用的組件很容易維護、擴展和閱讀。絕對是一個好習慣。
let tableItems = [{name:"AA",date:new Date()},.....]
return (
<table class="greyGridTable">
<tbody>
{tableItems.map((item,index)=>{
return(
<tr>
<td>{item.date}</td>
<td className = 'table-container'>{item.date}</td>
</tr>
)
})}
</tbody>
</table>
)
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/496546.html
標籤：javascript 反应 ecmascript-6 反应钩子 反应还原
下一篇：VMware三種網路模式詳解