我目前有一個名為的陣列options，它被映射到一個 React 組件，如下所示：
{options.map((option) => (
<Component key={option.code}></Component>
))}
但是，我正在嘗試擴展我的組件，以便如果 boolean value:shouldCount為真，則將optionsWithCount陣列而不是陣列傳遞給組件options。上面的組件有比顯示更多的道具等，所以我想盡可能避免重復使用所有道具的組件。
任何人都可以提出一種可能的方式來解決這個問題嗎？
uj5u.com熱心網友回復：
使用 utils 函式會getOptions()起作用嗎？它將shouldCount標志作為輸入并回傳所需的陣列。例子：
{
getOptions(shouldCount).map((option) => (
<Component key={option.code}></Component>
));
}
const getOptions = (shouldCount) => {
return shouldCount ? optionsWithCount : options;
}
uj5u.com熱心網友回復：
您可以有條件地更新選項變數，因此您不必再次重寫相同的代碼。
使選項成為一種狀態；
const [options, setOptions] = useState([])
并用于useEffect更新它；
useEffect(()=>{
if(shouldCount) setOptions([1,2,3,4,5])
else setOptions([5,6,7,8,9])
}, [shouldCount])
這樣，當 shouldCount 發生變化時，它將觸發 useEffect 并更改 optinos 值。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/408293.html
標籤：
下一篇：在父項中匯入SVG并傳遞給子項