這是我試圖以編程方式構建的一段代碼：
<RadioGroup>
<Radio key={1}/>
<div>Unique Content 1</div>
<Radio key={2}/>
<div>Unique Content 2</div>
<Radio key={3}/>
<div>Unique Content 3</div>
<Radio key={4}/>
<div>Unique Content 4</div>
</RadioGroup>
通常，您會這樣撰寫代碼：
const arr = [1, 2, 3, 4];
<RadioGroup>
{arr.map(a => (
<>
<Radio key={a}/>
<div>Unique Content {a}</div>
</>
))}
</RadioGroup>
但是由于特定的限制，我不能使用 React Fragments ( <> </>) 將Radio和div元素包裝在一起。因為它最終看起來像這樣：
<RadioGroup>
<>
<Radio key={1}/>
<div>Unique Content 1</div>
</>
<>
<Radio key={2}/>
<div>Unique Content 2</div>
</>
<>
<Radio key={3}/>
<div>Unique Content 3</div>
</>
<>
<Radio key={4}/>
<div>Unique Content 4</div>
</>
</RadioGroup>
我知道這些片段元素不會轉換為真正的 DOM 節點，但我需要將Radio組件RadioGroup與div. 而且我知道從一個函式回傳多個 JSX 元素是一種違規行為。
有沒有什么方法可以在使用或不使用的情況下實作這一目標Array.map()？提前致謝！
uj5u.com熱心網友回復：
一種選擇是從回呼中回傳一個包含這兩個元素的陣列，然后展平陣列陣列。
<RadioGroup>
{arr.map(a => [
<Radio key={a}/>,
<div>Unique Content {a}</div>
]).flat()}
</RadioGroup>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/530999.html
上一篇：計算字典串列中的出現次數