我正在使用 react-router
和 react-redux
。我有两条这样的路线:
<Route path='/edit' component={ EditNew } />
<Route path='/edit/:id' component={ EditDraft } />
其中 EditNew
和 EditDraft
是提供数据的容器,使用 react-redux
包装了一个 Editor
组件连接
函数:
const EditNew = connect(state => ({}))(React.createClass({
render() {
return <Editor />;
}
}));
和
const EditDraft = connect(state => ({ drafts: state.drafts }))(React.createClass({
render() {
const { params, drafts } = this.props;
const draft = findDraft(params.id, drafts);
return <Editor draft={ draft } />;
}
}));
现在,Editor
的设置方式是当您开始向空白的 Editor
中输入内容时,它会触发 history.replaceState()
从 /edit
到 /edit/:id
随机生成的 ID。发生这种情况时,我会得到以下事件序列:
EditorNew
卸载Editor
卸载EditorDraft
渲染和挂载Editor
渲染和挂载
我在对这两个容器进行编码时,想到的是这两个容器中包含的Editor
组件不用卸载重挂载就可以调和了。这对我来说是有问题的,除了额外的不必要的工作之外还有几个原因,其中最主要的是编辑器在卸载和重新安装后最终失去焦点和正确的光标范围。
无济于事 我尝试为 Editor
组件指定 key
以向协调系统提示它是同一个组件,并且我尝试了 shouldComponentUpdate
,但这不会被调用,考虑到 React 正在做的事情,这是有道理的。
除了使用更复杂的 render()
逻辑将两个容器合并为一个容器之外,我还能做些什么来防止 Editor
组件在运行期间卸载/重新安装历史转折?
最佳答案
React’s Reconciliation Algorithm表示如果元素具有不同的类型(在本例中为 EditNew
和 EditDraft
),那么 React 将“拆除旧树并从头开始构建新树。 ”
为防止这种情况,您需要为两条路线使用相同的组件。
关于javascript - 如何防止 React 卸载/重新安装组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33151563/