问题标签 [react-ref]

我想在一个页面上显示 2 个画布，这些画布以类的状态存储在一个数组中。基本代码-

我有一个切换按钮，点击它应该切换两个板。switch()功能-

假设我在顶部画布上画了一棵树，在底部画了一朵花。点击切换后，两个画布元素切换成功（在开发者工具中可见），但树仍然出现在顶部，花朵在底部，即看起来好像画布没有在网页上切换。

我尝试将ctx.save()andctx.restore()用于画布，但这似乎也不起作用。

我很困惑为什么会这样？我在这里做错了什么？

这篇文章与我能找到的一样接近，但我仍然无法让它适用于 2 个功能组件。如果我可以回答任何进一步的问题或提供更多信息，请告诉我。非常感谢您的参与。

我想从子级向父级引用一个<div>和一个组件。 所以我编写如下代码：<span>

在孩子里面我得到了类似的东西：

我想获取这些标签的属性。getBoundingClientRect()、scrollTop 等；但是来自 Parent 组件，因为我无法从 ChildComponent componentDidMount 计算它，因为这些组件尚未呈现。

这是我当前从浏览器控制台获得的结果：

如您所见，它current object向我显示了一个null值，但在里面您可以看到我想要获得的所有属性。

我创建了一个演示。

演示网址：https ://4ikgc.csb.app/

为什么 outerHTML 总是<h1>abc</h1>

顺便说一句，为什么控制台似乎将所有内容记录了两次。

现在console.log的内容是：

但我认为正确的内容是：

希望有人可以帮助我！非常感谢！

当用户单击组件中的 时，我试图调用show我的组件的方法，但它不起作用。Modal<button>App

我使用 a从组件ref访问组件。ModalApp

I am retrieving DOM nodes of my child components by passing a callback into its ref prop as shown.

Parent component:

Child component:

The information in the nodes such as getBoundingClientRect() are needed. However, I am unable to setState as it exceeds the maximum update depth when multiple child components trigger the callback. Is there a way of storing multiple DOM nodes in the state, or should I avoid setting the state completely and use a class variable instead?

下面是一个可变 ref 示例，它存储来自Overreacted 博客的当前回调：

但是 React Hook FAQ 声明不推荐使用该模式：

另请注意，这种模式可能会导致并发模式出现问题。[...]

无论哪种情况，我们都不推荐这种模式，只是为了完整性而在此处显示。

我发现这种模式特别适用于回调，但我不明白为什么它会在常见问题解答中出现危险信号。例如，客户端组件可以使用useInterval而无需环绕useCallback回调（更简单的 API）。

在并发模式下也不应该有问题，因为我们更新了里面的 ref useEffect。从我的角度来看，FAQ 条目在这里可能有一个错误的点（或者我误解了它）。

所以，总结一下：

1. 有什么从根本上反对将回调存储在可变引用中的吗？
2. 像上面的代码那样在并发模式下是否安全，如果不是，为什么不呢？

我是 React 和处理 React 的警告和错误的新手。所以，我希望了解我应该如何创建 refs而不是允许findDOMNode发生。

我正在App Bar中创建一个Popover。但是 Popover 引用会引发错误，并且在处理它时会消失，因为我的 ReactDOM 没有始终如一地处理它。问题是：我不能很好地处理。ref={ref}

为了了解更多信息，我在StrictMode中运行 React 。
React 需要一个forwardRef()以便它知道 Popover 相对于视图的位置，因此不会落在视图之外。但我不知道该怎么做。
如何使 createRef 和 forwardRef 工作？

我们可以通过在其 UL 父级上使用 React Refs 来获取所有 li 值吗？像前锋裁判或儿童之类的？？？

我期待使用 React Ref 执行以下操作。

我的反应代码如下

这是我正在尝试实现的列表过滤器。

onKeyUp 输入时，我希望执行以下操作。你认为使用状态有 li 值来实现这个过滤器是不可避免的吗？我正在考虑使用状态以外的其他可能性。

我正在尝试在 React 中使用不带地图的 Mapbox Geocoder（请参阅https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-geocoder-no-map/）。我可以成功创建一个 refs，但是一旦我将它用作.addTo()函数中的参数，我会收到此错误消息，尽管 refs 是[object HTMLDivElement]：

代码在这里：https ://codesandbox.io/s/patient-hill-xvh12?fontsize=14&hidenavigation=1&theme=dark