我可以在 React 应用程序中但在 React 组件之外安全地执行 DOM 操作吗？答案

【问题标题】：Can I safely do DOM operations in a React application, but outside the React component?我可以在 React 应用程序中但在 React 组件之外安全地执行 DOM 操作吗？
【发布时间】：2016-09-20 19:38:08
【问题描述】：

我正准备做我的第一个 React 项目，我的阅读表明我需要让 React 处理所有使用虚拟 DOM 的渲染，并且我不应该做任何手动 DOM 操作干扰虚拟 DOM 计算。

然而，我想不通的是：

假设我在一个带有其他 HTML 的页面中的 div #app 中呈现了一个 React 组件。这是否意味着我必须避免任何普通的 JavaScript DOM 操作页面上的任何地方？或者，只要我将 #app div 和元素单独留在实际的 React 组件中，我是否可以安全地在页面的其他地方使用 DOM 操作？

编辑：激励用例

我考虑让非 React 组件在 React 组件之外操作 DOM 的原因主要是为了让 Google 可以看到 HTML 而无需跳过很多麻烦。假设我想要一些对 SEO 有用的关于应用程序的描述性文本，并且该描述可能有一些下拉切换等（因此是 DOM 问题）。我真的想要/需要在 React 中编写所有内容，因为应用程序本身的复杂 UI 使用 React，如果成本使某些文本难以让 Google 索引？

【问题讨论】：

您可以在页面上进行 DOM 操作，但我不知道如果您修改了 React 根目录的 DOM inside 会发生什么。我想这会很有爆炸性。
没有。只是不要操作 React 管理的 dom 元素。即使你在技术上可以做到这一点，但你必须非常小心如何做，如果你所做的事情可以在组件的render() 中完成，请改为这样做。

标签： reactjs

【解决方案1】：

假设您的 html 文件如下所示：

<body>
  <div id="app"></div>
  <div id="others"></div>
</body>

React 是这样初始化的：

ReactDOM.render(<Component/>, document.getElementById('app'));

您可以安全地修改 div#others 和 DOM 的任何部分，但 div#app 内部除外，因为它由 React 管理。

【讨论】：

【解决方案2】：

我可能误解了你的问题，但 React 将是处理所有 DOM“操作”的理想人选。

您的 React 组件可以与使用普通 JS DOM 操作操作的元素位于同一页面上，但是您引入了相互冲突的范例。如果你曾经对自己说“我不能在 React 中做到这一点，但我知道如何使用 jQuery”，那么你很可能错过了一些东西。

编辑：感谢您澄清用例。您绝对不需要在 React 中编写所有内容。正如其他人所说，我建议您将 React 拥有的 DOM 部分与您的其他 JS 单独分开。 Fetch as Google 看起来可能有助于探索 React 中的 SEO。

【讨论】：

我已经编辑了我的问题，包括为什么我不一定要对页面上的所有内容都使用 React。也许现在这似乎是一个不那么愚蠢的问题？
更新了我的答案，听起来像是一个有效的用例。你的问题让我对探索 React 中的 SEO 感兴趣 :)