问题标签 [react-ref]

我正在尝试实施此答案中提供的解决方案。

在第二步中，我需要div在我的组件的componentDidMount 中获取我的组件中定义的大小。StackOverflow 上的许多线程都建议为此使用refs 。但是，我很难理解如何实现它。请给我一段代码作为示例，以了解如何在将元素挂载到 componentDidMount 后获取元素的大小？

我有 3 个组件，应用程序、父项和子项。App 使用 Parent 提供的方法，将孩子注册到 Parent。这是为了让 Parent 收集它所包含的 Children 的 Refs（创建依赖关系图）。

Child 有一个名为 Animate 的方法，Parent 通过创建的 refs 调用该方法。

当我尝试打印 dependencyMap 时，我可以看到正在生成一个数组，这是我所期望的。

但是当我尝试使用dependencyMap从Parent访问子组件时，它总是调用子列表中的最后一个。

也就是说，当我尝试在 Parent.js 中使用 animateDependentChildren 为 <CustomComponent> 设置动画时，即使我为 CustomComponent1 传递了正确的 ID，CustomComponent2 也只会获得动画。

知道我在这里做错了什么吗？不能 React.createRef 用于创建多个引用，然后单独调用它们吗？

我在定义参考时遇到了一个问题，即

当我访问时，.focus()我收到以下错误：

[ts] 类型“从不”上不存在属性“焦点”。[2339]

我能以某种方式告诉createRef这个 ref 可以是null或者TextInput它知道它.focus()可能存在吗？

在下面的代码中有“opened”属性，我想通过使用 ref 来更改它的值。这里我使用 ref 作为索引数组。

我试过了

谁能解释一下如何创建索引参考以及如何使用它？

我必须创建一些动态引用，以便将焦点集中在Input自定义组件中包含的内容上。

目前这是我渲染元素的方式：

在我的onEnterFunction我试图从一个移动<CountRow />到下一个。

在该函数结束时：

函数的最后一行onEnter总是爆炸。说：
TypeError: _this["".concat(...)].focus is not a function

有人可以为我需要做什么来选择特定的焦点提供指导<CountRow />吗？

有什么方法可以获取包装组件的 DOM 高度？

我尝试添加一个 ref 但控制台错误我Function components cannot be given refs.

我设置了forward ref，但似乎并非如此。

我想记录 的高度Component，但是这些日志没有意义，它们是 html-body 的高度而不是Component's。

但是当我在 chrome 控制台中时：

这'home-container'是一个包装的组件：

我在反应中实现了拖动、旋转和调整大小功能，所以我经常更改 CSS，我有三个选项

1. 对于每个更改，我都可以调度一个动作，因此将调用基于新状态的渲染。
2. 对于每个更改，我都可以更新反应状态，因此将调用渲染，
3. 我可以使用 React-ref 更改 CSS。

这将是一种有效的实施方式。

编辑：

在执行和执行方面效率很高。

如何为组件的每个实例创建一个 ref

我已经将一些代码提取到它自己的组件中。该组件是一个 PlayWhenVisible 动画组件，它根据元素是否在视图中来播放/停止动画。

我在组件构造函数中创建了一个引用，但是由于在使用组件的 2 个实例时出现了一些延迟，我想知道是否应该在组件外部创建引用并将它们作为道具传递，或者是否有办法为每个组件实例创建一个新实例。

ref一起使用via connect 和 redux-form时遇到问题。

组件的结构使得ChildComponent具有 Forms 并且我正在使用

组件有一个功能

我想从使用ref的 Parent 组件调用submitSettings，见下文

调用onSaveClick时，我总是收到以下错误

未捕获的 TypeError：this.editEventRef.current.submitSettings 不是函数

当我更改以下行并删除reduxForm()in的使用时，错误发生并且功能正常connect()

谁能指导我解决这个问题？我错过了什么吗？

感谢帮助。

更新 这些是我正在使用的 npm 版本的软件包，如果有帮助的话。

“react”：“^16.7.0” “react-dom”：“^16.7.0”，“react-redux”：“^5.1.1”，“redux-form”：“^6.7.0”，

我有一个简单的 TextInput，我想在我的渲染中添加一个参考：

然后我想在上面绑定在我的构造函数中的函数中使用该引用：

地址函数：

render 和 addAddress 中的控制台日志始终未定义。

我环顾四周，但似乎没有人遇到我的问题，通常他们有错字或没有绑定他们想要调用的函数。

为什么我似乎无法获得参考？