Javascript 保留React-DOM元素'；移植期间的原生状态

我正在使用React创建一个类似表单的界面，你知道，它包含各种

元素等等。其中一个特点是，由于其他数据（来自服务器或其他输入），文本字段将自行排列和重新排列

React处理所有的移位，除了一种情况：在父元素之间移动元素

My

render（）

JSX可能会根据状态在以下各项之间切换：

return (
    <div className="parent">
        <h4>Before container</h4>

        <input type="text" key="one"/>
        <div className="container"/>
    </div>
)

返回(
集装箱前
)

以及：

返回(
后容器
)

所有工作正常输入被移动并保持其所有浏览器原始状态（焦点/当前输入的文本/选择等）

但当它切换到：

return (
    <div className="parent">
        <h4>Inside container</h4>

        <div className="container">
            <input type="text" key="one"/>
        </div>
    </div>
)

返回(
集装箱内
)

它从头开始重新创建了

DOM元素，尽管保持了

键=

的完整性，但它的所有浏览器本机状态都将丢失

这是我的建议。你输入的内容在“之前”和“之后”之间保持不变，但在“内部”中消失

---

---

这是React的一个基本限制，还是有一种适当的方法可以在父级之间移动时保持本机元素的完整性？

键属性用于区分对等组件。假设不同上下文中的组件不具有可比性。比如说,

<div className="parent">
    <h4>Before and After container</h4>

    <input type="text" key="one"/>
    <div className="container"/>
    <input type="text" key="one"/>
</div>

更新的代码笔：

编辑：

由于其他工具的原因，您确实需要本机支持，因此更好的方法可能只是强制实施一致的层次结构

<div className="parent">
    <h4>Before container</h4>
    <div key="oneContainer">
        <input type="text" key="one"/>
    </div>
    <div className="container"/>
</div>


<div className="parent">
    <h4>After container</h4>
    <div className="container"/>
    <div key="oneContainer">
        <input type="text" key="one"/>
    </div>
</div>



<div className="parent">
    <h4>Inside container</h4>
    <div className="container" key="oneContainer">
        <input type="text" key="one"/>
    </div>
</div>

集装箱前
后容器
集装箱内

---

Codepen:

您的观察是正确的，当您将输入元素放入一个新容器中时，react将创建一个新的虚拟DOM节点并重新渲染其子节点。当您简单地将一组元素放置在相同的深度时，react会根据关键道具跟踪每个元素的顺序，并且只对元素进行重新排序，而不使用完整的重新排序器。虽然我不知道在重新排序元素时为什么要将元素放入容器中，但可以将状态存储在组件的状态中并相应地传递它。如果状态不知何故无法保存到状态。您可以找到元素的通用层次结构，例如，将每个输入包装在一个容器中，并将键分配给容器而不是输入。

Gah，crumb！这个

.focus

技巧很有效。。。但不是真的。它会关闭手机上的触摸键盘，丢失用户的精确选择，并使用输入重置任何第三方（非反应）工具。如果这真的是我们能做的最好的反应，那就让我失望吧-(

<div className="parent">
    <h4>Before and Inside container</h4>

    <input type="text" key="one"/>
    <div className="container">
        <input type="text" key="one"/>
    </div>
</div>

<input type="text" key="one" ref={(input) => { this.textInput = input; }}/>

componentDidUpdate() {
    this.textInput.focus();
}

<div className="parent">
    <h4>Before container</h4>
    <div key="oneContainer">
        <input type="text" key="one"/>
    </div>
    <div className="container"/>
</div>


<div className="parent">
    <h4>After container</h4>
    <div className="container"/>
    <div key="oneContainer">
        <input type="text" key="one"/>
    </div>
</div>



<div className="parent">
    <h4>Inside container</h4>
    <div className="container" key="oneContainer">
        <input type="text" key="one"/>
    </div>
</div>