问题标签 [react-dom]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
reactjs - 在非 React 应用程序中安装/卸载 React 组件时保留 DOM 节点的引用
我正在使用 webpack 在非反应应用程序中使用反应组件。想法是以某种方式导出它们，以便它们可以在任何 DOM 上安装和卸载。
这是我正在测试组件的 html 页面：
这是 webpack 入口点：
在 webpack 配置中，我将包导出为库，使用：
ComponentMounter 类：
希望你能看到我在那里尝试做的事情。单击显示按钮时，组件安装没有问题。
但是当我尝试卸载它时，似乎该元素不是有效的 DOM 元素，因为我收到了以下警告：
invariant.js:38 Uncaught Invariant Violation: unmountComponentAtNode(...): Target container is not a DOM element.
如何保留对安装在 ComponentMounter 对象内的 DOM 节点中的 React 组件的引用，以便在需要时轻松卸载它？
javascript - React：从 DOM 节点中的选择字段中获取值
我是一个新手后端开发人员，我的任务是修复一个功能，但我被困在反应部分。我似乎找不到合适的语法来从选择组件中获取值，这几乎是我的全部问题。我查看了许多其他帖子和 react 文档，但我正在尝试的没有任何工作。标记示例如下（此视图中有很多选择字段）：
那么事件处理程序如下：
console.log(field) 的结果是：
它从那里继续，但'value =“NHDS”'是我需要的部分，我无法弄清楚如何在我的生活中得到它。如果我能澄清或改进这个问题，请告诉我。提前致谢。
javascript - 如何在 ReactJS 中检查事件目标的类名？
我现在有一个函数handleRightClick(e)，当我右键单击容器时将调用它。在容器内，有几个Items，我希望只有当我右键单击其中一个时才会显示菜单Item。
如果我console.log(e)，我会在 Chrome 控制台中得到这个：
这是课程Item：
最后，我将使用它来形成这样的东西：
我想检查事件目标是否是Item类。如何访问事件目标的类名？
reactjs - 在渲染之前找到反应组件或图像的大小
我有一个不同尺寸的图像列表。
我想在渲染它们之前获取它们的高度数组。然后，我将仅根据 scrollHeight 渲染应在视口中的图像。例如使用React Infinte
我可以在反应组件之外轻松地做到这一点
但new image()在反应中不起作用，因为它依赖于 DOM。
我的 React 组件渲染方法如下所示。
如何获得图像高度？我应该使用 ReactDOM 在临时 div 中渲染图像吗？
javascript - React 服务器端渲染 - 无效校验和警告
我正在做 Nodeschool 的 react 教程，模块名为learnyoureact.
我正在Isomorphic上课（11 次中的 8 次），我遇到了警告：
我的解决方案与此解决方案相同，我什至尝试从该解决方案复制和粘贴，但我仍然收到相同的警告。要重新创建问题，请从上面的 repo 中复制代码。
这是什么意思呢？我查看了一些关于此的 SO 帖子，例如this和this，但我认为解决方案与我的问题/警告无关。作为一个 React 新手，我对接下来要做什么感到困惑。HTML 页面看起来不错，但learnyoureact模块说生成了不同的 HTML，我也可以在 Chrome 的检查工具中看到这一点。
我发现问题出在这条线上。
我该如何解决这个问题/警告？谢谢！
这是错误跟踪的图片：
这就是我现在看到的。node program.js在我离开并在几个小时后重新运行后，警告神秘地消失了，但在我的终端中，我仍然得到相同的错误 HTML。有任何想法吗？
javascript - React 动态表单状态处理
我有一个动态表格。表单不会根据用户输入以首选模式增长，我将表单中的所有用户输入捕获为 React State。
在提交表单时，我将 State(JSON) 转换为 YAML 文件。该状态的 JSON 结构有一个深度树，其中涉及多个数据结构。当我更改此深层树中的任何元素时，表单会更新。但是，随着动态表单的增长，表单加载时间和反应时间也会增加。有什么方法可以更快地处理这种复杂的状态操作？
javascript - 使用 React 和随机生成的字符串进行服务器端渲染？
我第一次在我的 React/Redux 应用程序中尝试服务器端渲染。我现在遇到的一个问题是我需要初始状态有一个随机生成的字符串，然后将它作为道具传递给我的主要App组件。这显然会导致问题，因为它为客户端和服务器生成不同的字符串。我能做些什么来阻止这个问题的发生吗？
帮助理解的基本结构：
应用程序.js
还有我的减速机：
减速器.js
如您所见，我randomStr从我的 redux 商店获取并渲染它，但它在客户端和服务器中是不同的。任何帮助，将不胜感激！
javascript - 使用 Webpack 包含来自 CDN 的 React，但不包含 ReactDOM
在我的 webpack 构建中，我想从 CDN 加载 React，但不是ReactDOM，因为它需要一个非常小的文件的额外往返。
我的 webpack 配置有以下代码块声明“外部”，因此它不会构建这些文件（我改为包括 CDN）。
webpack.config.js
问题是只在外部包含 React 仍然会构建 React，因为 ReactDOM 依赖于它。
node_modules/react-dom/index.js
添加'react-dom': 'ReactDOM'到 externals 可以有效地将它们从包中删除，但我不想包含 ReactDOM CDN ...
如何配置 webpack 以从 CDN 加载 React，但在我的主包中包含 ReactDOM？
注意：我使用的是 webpack 2.1.0-beta17 和 React 15.1.0。
更新
我尝试添加react/lib/ReactDOM到外部。
但我收到以下错误。
要求未定义
javascript - 为 module.exports = require('react/lib/ReactDOM') 配置 Webpack 外部
我有一个需要并分配给的库（ReactDOM），module.exports我想配置 webpack 以将此导出注册为外部。webpack文档并没有非常清楚我应该如何做到这一点......
对象：如果依赖项与对象的属性完全匹配，则将属性值用作依赖项。属性值可能包含一个依赖类型前缀并用空格分隔......
我想注册为外部的实际源文件具有以下任务...
我尝试了以下配置，但没有成功。
如何配置 webpack 以将此 require 语句注册为外部依赖项？
我正在使用 React 和 ReactDOM ^15.1.0。
javascript - react-dom/server 是否在客户端工作？
我需要在客户端呈现顶级 html 标签（例如，<html><head>...</head><body></body></html>）。结果将被注入到 iframe 中。在服务器上，我会使用renderToStaticMarkupfrom 的功能react-dom/server，但仅客户端react-dom没有此功能。
react-dom/server可以在最新版本的 react（当前为 15.3.0）中在客户端上工作吗？如果是这样，react 开发团队是否有任何迹象表明它将在未来的版本中继续在客户端上得到支持？