reactjs - 更改组件放置时维护组件状态

Question

我的问题如下：我有一个InnerComp可以放置在 JSX 结构内的两个不同位置的它，它的位置取决于一个变量place。

我需要的是，当父组件更改 的位置时InnerComp，当前状态（我的意思不仅仅是组件的内部状态，而是渲染的其他子组件，与它相关的任何内容）保持不变。

我唯一的想法是将其保存InnerComp到 auseRef中，但它似乎不起作用。让我向您展示此沙箱中的示例：https
://codesandbox.io/s/pedantic-smoke-3risy 现在，请按照下列步骤操作：

1. 如果单击increase，您会看到counter父组件props.counter中InnerComp的
2. 如果单击增加内部，innerCounter则增加；
3. 然后，如果您单击switch place，InnerComp则 将呈现在另一个位置，但innerCounter会回到0;

我知道当我想更改位置时，我可以尝试更改 HTML TAG 结构并更改 CSS（我确信这会起作用），但不幸的是，在真正的 REACT 应用程序中，我需要过度复杂化使之成为可能的结构（这两个位置不相关，如本例所示）。

我完全没有想法，所以在这里我问一种方法来实现这一点。向我指出一种可能的方法就足够了，然后我会尝试。

标签： reactjsreact-hooks

Answer 1

我认为这是React.Portals的最佳案例。但是我还没用过☹️。