我可以有一个组件保持挂载，而传递给另一个?

Question

我有这样的东西:

{condition ? (
<Bar/>
) : (
<Foo/>
)

<Bar/>内部

return (
<>
<A/>
<B/>
<Foo/> 
<C/>
</>
)

所以它实际上只是一个在foo之前和之后的组件列表。当切换条件时，整个程序卸载。

{condition ? (
<Bar>
{memoizedFoo}
</Bar>
) : (
memoizedFoo
)}

不工作不幸的是:/但这是我想要的。我怎么能做到这一点，或重构代码考虑到<Bar/>有无数的效果和承诺和东西，，但它是一个单一的道具，它传递给<Foo/>

?

Answer 1

最后我做了:

const [cProps, setCProps] = useState(null as any)
{condition && <Bar setCProps={setCProps}/>}
<Foo/>
{condition && <C ...cProps/>}

感觉非常反模式，所以如果有更好的答案，那是非常受欢迎的。与此同时，这似乎是有效的。bar中发生了很多效果和记忆的事情，但最后只写了少数结果，所以我将它们捆绑在一起。