问题标签 [react-dom]

我正在使用 ReactJS 和 Flux 构建一个 Web 应用程序，我正在尝试使用findDOMNode方法 获取当前 div 的节点，但出现下一个错误：

所以，我尝试使用getDOMNode并得到了同样的错误：

我正在使用 npm 构建 JS，我使用这些方法的代码：

ReactJS 版本：0.14.0

编辑

正如答案中所指出的，从 v0.14.0 开始的 DOM 库不在 React 核心范围内，因此我对代码进行了一些更改：

但我遇到了另一个问题：

我有点新反应。我看到我们必须导入两件事才能开始，React并且ReactDOM，任何人都可以解释其中的区别。我正在阅读React 文档，但没有说明。

当组件完全渲染时，我需要进行一些尺寸计算。然而，该componentDidMount方法会在组件被渲染后立即触发，但它的子级不会。这段代码例如：

输出0

完全渲染组件以及任何后代组件后，触发某些代码的正确方法是什么。

编辑：我不想使用componentDidUpdate，因为该方法会在任何更新时触发。我只需要运行一次。

Edit2：正如@NaisheelVerdhan 指出的那样，文档说componentDidMountins 首先在孩子身上调用，但在这种情况下，我对上面的示例返回的原因感到困惑0

我只想做以下事情：

例如，每 3 个.col-md-4's包裹在一个.row

我试过了：

不幸的是，这不起作用。

此外，3 和 9 只是这里的示例，我想知道是否有通用方法。

我注意到reactDOM.renderToString()在服务器上渲染大型组件树时，该方法开始显着减慢。

背景

一点背景。该系统是一个完全同构的堆栈。最高级别的App组件呈现模板、页面、dom 元素和更多组件。查看 react 代码，我发现它渲染了大约 1500 个组件（这包括任何被视为简单组件的简单 dom 标签，<p>this is a react component</p>.

在开发中，渲染约 1500 个组件需要约 200-300 毫秒。通过删除一些组件，我能够在约 175-225 毫秒内获得约 1200 个组件来渲染。

在生产中，大约 1500 个组件上的 renderToString 大约需要 50-200 毫秒。

时间似乎是线性的。没有一个组件是缓慢的，而是许多组件的总和。

问题

这会在服务器上产生一些问题。冗长的方法导致服务器响应时间长。TTFB 远高于应有的水平。对于 api 调用和业务逻辑，响应应该是 250 毫秒，但是对于 250 毫秒的 renderToString，它会加倍！对 SEO 和用户不利。此外，作为一种同步方法，renderToString()可以阻止节点服务器并备份后续请求（这可以通过使用 2 个独立的节点服务器来解决：1 个作为 Web 服务器，1 个作为单独渲染反应的服务）。

尝试

理想情况下，在生产环境中 renderToString 需要 5-50 毫秒。我一直在研究一些想法，但我不确定最好的方法是什么。

思路一：缓存组件

任何标记为“静态”的组件都可以被缓存。通过将缓存与渲染标记保持一致，renderToString()可以在渲染之前检查缓存。如果它找到一个组件，它会自动抓取字符串。在高级组件上执行此操作将保存所有嵌套子组件的安装。您必须将缓存的组件标记的反应 rootID 替换为当前的 rootID。

想法 2：将组件标记为简单/愚蠢

通过将组件定义为“简单”，react 应该能够在渲染时跳过所有生命周期方法。React 已经为核心的 react dom 组件（ , 等）做到了这<p/>一点<h1/>。扩展自定义组件以使用相同的优化会很好。

想法 3：在服务器端渲染上跳过组件

不需要服务器返回的组件（没有 SEO 值）可以简单地在服务器上跳过。客户端加载后，设置一个clientLoaded标志true并将其传递下来以强制重新渲染。

关闭和其他尝试

到目前为止，我实现的唯一解决方案是减少在服务器上呈现的组件数量。

我们正在关注的一些项目包括：

• React-dom-stream （仍在为测试实现这个）
• Babel 内联元素 （似乎这与想法 2 一致）

有没有人遇到过类似的问题？你能做什么？谢谢。

我运行了使用 router.create 的 react 0.13-router 但 1.0.3 它没有工作
我正在使用 router-react ，如本例所示

但我有以下错误

这就是向我显示 renderProps 的日志

请一些简单的例子来使用？

我正在处理的仪表板 UI 有三个主要组件（我是 React 初学者，来自 Angular）：侧边栏、顶部导航和内容容器。

我如何将它们拆分为三个独立的 UI 组件并在其他组件中调用它们？我希望能够做到这一点：

此外，您将如何将其<div className="wrapper container"></div>用作所有内容的视图？

我正在使用 ES6 和React Starterify应用套件。

在一个 React 文件中，我有以下内容：

只有第一个渲染有效：“博客按钮”出现了。其他两个“NavButton”和“PoweredbyButton”不显示。我也没有在控制台中收到错误。那是因为你不能在一个文件中有多个渲染吗？我如何将所有这些组合到一个渲染调用中？

我正在使用 npm v2，出于某种特定原因，我需要将react-dom与 browserify 捆绑在一起。

但是我在安装它的依赖项时遇到了问题。我的步骤：

• .tar从 npm 注册表 ( http://registry.npmjs.org/ )下载 react-dom文件并解压

• 转到 react-dom 文件夹并运行npm install --production，但这会导致错误：

  /li>

有趣，但如果在npm install没有--production标志的情况下运行，它会获得对等依赖项而不会出错。

任何解决方法？

更新发布npm-debug.log文件内容：

更新package.json 文件内容：

使用服务器渲染示例react-dom会导致与 JSX 相关的语法错误：

我试图在我的 Koa 应用程序中使用它，但不知道如何让 Node 支持它。网络上的示例是否假设代码是使用 Babel 处理的？