Reactjs 更改零部件放置时保持零部件状态

我的问题如下：我有一个

InnerComp

，它可以放在JSX结构中的两个不同位置，它的位置取决于变量

place

我需要的是，当父组件更改

InnerComp

的位置时，当前状态（我指的不仅是组件的内部状态，还有渲染的其他子组件，以及与之相关的任何内容）保持不变

我唯一的想法是将

InnerComp

保存到

useRef

中，但它似乎不起作用。 让我在此沙盒中为您展示一个示例：
现在，按照以下步骤操作：

如果单击增加，您会看到父组件中的

计数器

已更新，但

InnerComp

中的

道具计数器

未获得更改（重新渲染时未计算ref:（）

如果单击增加内部，则

内部计数器

会增加

然后，如果单击开关位置，

InnerComp

将在另一个位置呈现，但

innerCounter

将返回到

0

我知道，当我想要改变位置时，我可以尝试改变HTML标记结构和CSS（我确信这会起作用），但不幸的是，在真实的REACT应用程序中，我需要将结构过度复杂化以实现这一点（这两个位置不像本例中那样相关）

---

我完全没有主意了，所以在这里我想问一个实现这个目标的方法。这就足够给我指出一个可能的方法了，然后我会尝试。

我认为这是一个最好的例子。但我还没有使用它☹️.

如果我正确理解了您的问题，您不需要ref，只需使用相同的

键

，例如

 {place === true && <InnerComp counter={counter} key={1} />}
  <hr />
 <h2>Place 2</h2>
 {place === false && <InnerComp counter={counter} key={1}/>}

{place==true&&}

地点2
{place==false&&}

现在交换计数器，您将看到内部状态没有丢失。这与对账有关。我想答案是：

一个键告诉它应该在概念上考虑一个项目。 即使它在其父元素中有不同的位置，也是一样的 在渲染之间

---

我正在添加答案，以防其他人发现这个问题

最后，我使用

react reverse portal

NPM包（）找到了一个解决方案

---

基本上，据我所知，它利用了

React.Portal

。您所做的是定义一次可以在

中更改其在DOM中位置的元素，然后使用

在不同位置渲染该元素（尽管不能同时在不同位置渲染同一元素）.

您是否试图在echa组件上实现不同的计数器？如果您指的是内部组件和父级，则不。我希望内部组件在域中的位置发生变化后仍保持其内部计数器不变，您有点困惑。我将扩展我的答案，尝试以正确的方式向您指出问题是您希望更新每个子级独立声明？或者您想更新父计数器并在两个孩子中显示父计数器？我只有一个

InnerComp

，不是两次或更多次。总之，我得到了答案，但无论如何感谢您的时间！好的，在我的沙箱中它可以工作，明天我将尝试我的项目。尽管..我不确定为什么它可以工作：我的意思是，我知道对账，b但它不应该只用于比较同级元素吗？这在使用

.map（）渲染一堆元素时非常有用

function？通过在这种情况下工作，似乎可以在所有位置比较按键application@Jolly可能是因为这两个InnerComp在本例中都有相同的父类div，类名为AppUhm..我问这个问题是因为我不确定它是否能在我真正的项目中工作。我会让你知道的tomorrow@Jolly看来它比较像这样的关键耳鼻喉科，检查答案我想我找到了相关信息。