问题标签 [react-dom]

我已经在这个 CodePen 中说明了这个问题

有一些逻辑以AnimatedComponent动画方式更改组件的样式，例如在 1 秒的持续时间内将背景颜色从黑色更改为红色。动画是通过更改颜色类开始的AnimatedComponent。给定更改的类，有 CSS 来处理动画。

当将 DOM 结构从嵌套更改为平面时，HTML 元素被销毁并重新创建，转换开始状态丢失（也就是浏览器不知道之前设置了哪个类，因为元素是新创建的）。

我希望 React 做的是通过在新位置移动元素来改变 DOM 结构，而不是破坏和重新创建它们。

这可能吗？

我尝试在 上使用key道具<AnimatedComponent />，但它只修复了 DOM 更改的 flash。动画被跳过。请参阅Codepen。感谢托马斯鲁尼的这个建议。

我可以告诉 React 在 DOM 元素的位置更改后仅应用类更改吗？

我正在尝试扩展一个 React 输入组件，该组件需要输入密码，并且在它旁边的元素或元素上发生某些事件之后 - 它需要切换输入的类型（type="text/password"）。

React 如何处理这个问题？

我有这个作为我的组件的类：

编辑 我已经编辑了渲染方法并添加了一个处理事件的函数，但我现在得到：

警告：setState(...)：在现有状态转换期间无法更新（例如在 内render）。渲染方法应该是 props 和 state 的纯函数。

我的浏览器崩溃了。

......

......

我正在阅读使用以下词汇表的 React 文档的一部分，但我无法弄清楚它们之间的关系：

• 一个组件
• 组件的实例
• 组件的支持实例
• 一个虚拟 DOM 元素
• 一个ReactElement

它们是否以及如何相关？

问题：

如何将 React 组件的方法暴露给其他地方？

例如，我想从 React 之外的元素调用 React-Router 的 this.context.router.push(location)。

也许我可以将 React 组件的方法添加到窗口对象，以便可以从任何通用 DOM 事件侦听器甚至控制台调用它？

背景/用例：

我想在我的 React 应用程序中使用 jQuery DataTables，因为它提供了许多在 React 生态系统中仍然不可用的插件和配置。

我从一个现有的 React 数据表组件开始（下面的实现）。

原始版本提供了很好的选项来传递渲染函数，例如，可以在单元格内渲染其他 React 组件。下面，“产品名称”列中的单元格呈现为 React-Router < Link /> 组件。

我对现有组件所做的修改涉及对 React 的 DOM 差异算法隐藏表，否则当 jQuery DataTables 修改 DOM 时它会中断。

1. 将组件的render()代码移动到类上的自定义方法getDtMarkup()中（在反应生命周期之外）。

2. render()现在输出一个带有ref和id的空 div

   /li>

3. componentDidMount 使用 ReactDomServer.renderToStaticMarkup 将 React 组件转换为普通的非反应标记，并将其附加到来自 render() 的 #dtContainer div。最后，jQuery DataTables 将呈现的表格 html 初始化为一个花哨的“jQuery DataTable”。

   /li>

src https://github.com/alecperkey/react-jquery-datatables/blob/master/src/Table.js#L89-L111

我提出这个问题的限制是我现在无法在这个静态的非 React 标记中使用 React 组件，例如 < Link />。我现在正在使用 <a href="">，但这会重新加载页面，速度较慢并导致浏览器出现白色闪烁。

我正在尝试构建一个 React 模块，然后在我的主应用程序中使用它，但是在使用它时我得到：

addComponentAsRefTo(...)：只有 ReactOwner 可以有 refs。您可能正在向未在组件的 render 方法中创建的组件添加 ref，或者您加载了多个 React 副本。

这是我的 webpack AwesomeModule：

在我的主应用程序中，我将它添加到dependencies我的package.json. 这是我的 webpack 配置App

我的问题在哪里？

假设我有两个反应组件。

组件 A 是网站所有者可以添加到其网站的电子商务商店。它保存商店的产品，网站的访问者可以选择要添加到购物车的商品。

组件 B 是一个购物车组件，站点所有者可以选择将其添加到其站点的标题中。

我想解决的一个基本用例如下：

1. 用户访问该网站并将商品添加到他们的购物车
2. 组件 A 执行更新共享购物车商店的操作
3. 此购物车商店向组件 B 发出更改警报
4. 组件 B 通过从购物车商店获取新的购物车信息来更新其状态
5. 新计数反映在标题中

在网站上，像 A 和 B 这样的组件被称为“插件”。当主站点呈现其页面时，它会遍历要在页面上呈现的插件列表。这些插件中的每一个都是相互独立的。

我的问题是，有没有办法让这两个插件中的两个被传递到同一个商店，或者订阅同一个商店，而无需与主父组件交互？

如果这不可行，我的下一个解决方案是将组件 A 和 B 容纳在容器组件 X 中。X 将是一个持有状态和业务逻辑的提供者。A 和 B 将仅包含视图逻辑。X 将呈现为插件，但在页面上不可见，并管理 A 和 B 的状态。

如果我采用这种容器方法，有没有办法从容器中提取 A 和 B，以便在它们链接到同一个商店后独立渲染它们？

I know this is not idiomatic React, but I'm working on a React component (an inverse scrollview) which needs to get notified of downstream virtual DOM changes both before they are rendered and after they are rendered.

This is a little hard to explain so I made a JSFiddle with a starting point: https://jsfiddle.net/7hwtxdap/2/

My goal is to have the log look like:

I'm aware that React sometimes batches DOM changes and that's fine (i.e. the log events could be before update; rendered big; rendered big; after update; ...) -- important part is that I am actually notified before and after the DOM changes.

I can manually approximate the behavior by specifying callbacks, as done here: https://jsfiddle.net/7hwtxdap/4/. However, this approach does not scale—I need, for example, to have events bubble from descendents rather than children; and would rather not have to add these kind of event handlers to every component I use.

Use case:

I'm working on making an "inverted scrolling component" for messages (where, when new elements are added or existing elements change size, the basis for scroll change is from the bottom of the content rather than the top ala every messaging app) which has dynamically modified children (similar to the <MyElement /> class but with variable height, data from ajax, etc). These are not getting data from a Flux-like state store but rather using a pub-sub data sync model (approximated pretty well with the setTimeout()).

To make inverse scrolling work, you need to do something like this:

Importantly to this design, I'd like to be able to wrap the element around other elements that are not "inverted scrolling aware" (i.e. do not have to have special code to notify the inverted scrolling handler that they have changed).

我的页面没有根据指定的路由进行路由。我的文件就是这样。目前我的Home.js和Main.js运行良好。但是当我尝试路由到playerOne时，什么也没有发生。IE。页面保持不变，没有任何变化。

我对反应完全陌生，并且正在努力学习。我不知道我错在哪里了。有人可以帮帮我吗？？提前致谢。

路由.js

PrompContainer.js

主.js

主页.js

index.js

我的入口点是index.js文件。我的目录结构是这样的——

我的 package.json 文件是 -

我的 Webpack 配置是

我想在 ReactJS 中访问子属性“checked”的布尔值。现在我有以下渲染方法。

类 LoginCard.js

我想checked在 component 中获取 bool 值RememberMe。下面向您展示RememberMe.

类 RememberMe.js

该组件Checkbox来自Material UI，它具有checked. 我尝试var isRemMeChked = ReactDOM.findDOMNode(this.refs.RemMeChk.refs.rm).checked;在类 LoginCard 中使用来访问 bool 值，但它是未定义的。访问布尔值的正确方法是什么？

我正在尝试为移动设备构建一个长导航栏，并且我正在以手风琴风格开发它。第一个视图将具有当前活动的链接名称。用户单击此活动链接名称时，它会在下面展开并列出其他可用链接。

在代码示例中，我试图获取当前活动的链接（PATH1 或 PATH2）来代替“HEADER”

有什么建议或建议我应该注意什么？