請讓我知道如何在一行中優化以下代碼：
{addressToDisplay?.addressLineOne}
{addressToDisplay?.addressLineTwo}
{addressToDisplay?.city}
{addressToDisplay?.state}
{addressToDisplay?.zip}
uj5u.com熱心網友回復：
如果您的物件已經井井有條，您可以這樣做
return <p>{[...Object.values(addressToDisplay || {})].join` `}</p>;
否則你有這種解決方案
const { addressLineOne, addressLineTwo, city, state, zip } =
addressToDisplay || {};
return <p>{[addressLineOne, addressLineTwo, city, state, zip].join` `}</p>;
uj5u.com熱心網友回復：
你可以試試這個：
Object.keys(addressToDisplay).map(function(key) {
return <>{ addressToDisplay[key] }</>
})
并顯示兩個鍵值，您可以添加：
Object.entries(addressToDisplay).map(([key, val]) =>
<h2 key={key}>{key}: {val}</h2>
)
如果您需要特定的值，那么您可以將所需的鍵存盤在一個陣列中
addressField = ['city', 'state', 'lineone', 'linetwo']
然后讓他們通過
{addressField.map(key => <>{addressToDisplay[key]}</>)}
uj5u.com熱心網友回復：
如果您想有選擇地顯示屬性并使用 Typescript
{['addressLineOne', 'addressLineTwo', 'city', 'state', 'zip'].map(
(val, idx) => (
<div key={idx}>
{addressToDisplay[val as keyof typeof addressToDisplay]}
</div>
)
)}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/459913.html
標籤：javascript 反应