我有一個組件陣列。
const components = [
A,
B,
C,
]
然后我想像這樣渲染這些組件：
return (
<A>
<B>
<C>
</C>
</B>
</A>
)
但我可以添加一個新組件或切換組件的順序。我想以與組件陣列相同的順序呈現此組件樹。
那么如何根據 components 陣列動態創建組件樹呢？
uj5u.com熱心網友回復：
最后一個
寫一個遞回函式，nest. 至少需要一個組件 -
const nest = ([T, ...more]) =>
more.length == 0
? <T />
: <T>{nest(more)}</T>
像這樣在您的組件中使用它 -
function MyComp(props) {
return nest([A, B, C])
}
可能為零
如果您希望支持空陣列，這是最安全的 -
const nest = ([T, ...more]) =>
T == null
? null
: <T>{nest(more)}</T>
nest([]) // => null
nest([A,B,C]) // => <A><B><C/></B></A>
帶道具
如果您想為組件提供道具，您可以使用類似的技術 -
const nest = ([T, ...more], [p, ...props]) =>
T == null || p == null
? null
: <T {...p}>{nest(more, props)}</T>
nest([A,B,C], [{active: true}, {onClick: console.log}, {}])
<A active={true}>
<B onClick={console.log}>
<C />
</B>
</A>
選擇
如果需要道具，更好的解決方案可能是使用延續將道具與組件放在一起 -
const nest = ([T, ...more]) =>
T == null
? null
: T(nest(more))
nest([
_ => <A active={true}>_</A>,
_ => <B onClick={console.log}>_</B>,
_ => <C/>
])
<A active={true}>
<B onClick={console.log}>
<C />
</B>
</A>
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/472971.html
標籤：javascript 反应