javascript - 在移植过程中保留 React DOM 元素的原生状态

Question

我正在使用 React 创建一个类似表单的界面，你知道，有各种 <input/>元素之类的。其中一个特点是文本字段会根据其他数据(来自服务器或其他输入)自行排列和重新排列...

React 可以很好地处理所有的移动，除了一种情况:在父元素之间移动一个元素。

我的 render() JSX 可能会根据状态在以下状态之间切换:

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

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

和:

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

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

一切正常——输入四处移动并保持其所有浏览器原生状态(焦点/当前输入的文本/选择/等)。

但是当它切换到:

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

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

它重新创建了 <input/>尽管保留了 key=，但从头开始的 DOM 元素及其所有浏览器原生状态都丢失了完好无损!

这是a codepen demonstrating what goes wrong .您的打字在“之前”和“之后”之间保持不变，但在“内部”消失了。

---

这是 React 的基本限制，还是有适当的方法在父元素之间移动时保持原生元素的完整性？

Answer 1

key 属性旨在区分对等组件。假定不同上下文中的组件不可比较。例如，

<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 and Inside container</h4>

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

会好的。

那么我们如何解决这个问题呢？

最好的办法是为输入字段分配一个 ref，然后在每次更新后重新聚焦它；

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

然后

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

更新的代码笔:https://codepen.io/anon/pen/eGdmeV

编辑:

鉴于您确实需要其他工具的原生支持，更好的方法可能只是强制执行一致的层次结构；

<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>

代码笔:https://codepen.io/anon/pen/bowNKB