通常我们可以通过在构造函数内部编写来在基于 ReactcreateRef()类的组件中使用。this.myRef = React.createRef();

我的问题是：

有没有办法ref在基于函数的组件中使用？

这是在基于类的组件中使用 refs 的常规方法：

在查看了如何使用 refs 的 React 文档之后，一旦设置了 ref 并将其链接到 DOM 节点，它就会声明，例如让 DOM 节点重新加载（在我的情况下，当使用 HMTL5 视频标签时）你有做例子this.videoRef.current.load()而不是简单地做this.videoRef.load()。有谁知道这个当前属性的作用/代表什么，以及为什么它是必要的？在尝试了这两种情况后，我的代码只适用于前者。

我试图用命令式refs地设置onEndReached我的 FlatList 的道具。有没有办法做到这一点？

我已经修改了PR PR 中的一个示例，该示例添加setNativeProps了在一定时间间隔内将颜色从黑色切换为白色，但无法获取onEndReached或onScroll调用。

谁能帮我理解我做错了什么？

我尝试过的事情

onEndReached直接设置this.list

请参考React DOCS 中的这个URL。此代码的一个版本也可在此处获得。

我知道在 a 内部Functional React Component，最好使用useCallback钩子来创建 ref 回调，如上面的 React Docs URL 所示，但我想了解如果使用简单的arrow function（内联函数）作为 ref会发生什么打回来。

因此，在下面，我修改了上面 URL 中的代码以不使用useCallback钩子。相反，我只是使用常规arrow function作为 ref 回调。此外，我添加了两个 console.log 语句。这是此URL 上也提供的代码。

加载此应用程序时，将打印以下内容（添加编号）：

为什么 ref 回调被调用了 3 次，为什么组件在初始加载时会渲染 3 次？

1. Comp1 和 Comp2 参考有什么区别？
2. 为什么我必须使用 forwardRef 和 useImperativeHandle 才能真正获得 Comp1 的引用？

https://codepen.io/benma/pen/mddEWjP?editors=1112

我正在尝试将图像放在背景上，并根据this.pitchWidth. 的属性this.playerRef似乎在内部正确更新，componentDidMount但由于某种原因，没有className="fas fa-tshirt GK"渲染的图像。有人知道为什么吗？

我有一组数据，我映射并显示在屏幕上。我希望能够在单击时对这些 dom 元素进行操作。我已经将 refs 存储在一个数组中，现在 onclick 我想对单击的那个做一些事情，而对其余的做一些其他事情。

所以我想到了使用 es6 过滤器从新数组中删除当前的过滤器，然后遍历它们。然后我可以自由地对被点击的项目做任何我想做的事情。

但是我无法让过滤器工作。没有安慰任何东西。

https://codepen.io/_adamjw3/pen/MWWmGEg

我在这里有一个代码沙箱，它演示了我想要做什么。

当用户按下按钮时，会显示文本输入并获得焦点。

为此，我使用 ref 并为其提供焦点，这很好：

当用户从文本字段中跳出时，我希望焦点回到那个按钮上。

在我在这里的代码中，我也通过使用 ref 并将焦点放在按钮上来实现这一点。

然而，问题是如果用户使用他们的鼠标点击另一个按钮，那么焦点仍然被赋予触发按钮。

我想做的是为这些组件定义一些标签顺序，即：

TextField => 触发按钮 => 其他按钮

但是，我不想将选项卡索引硬编码到我的组件中，因为这可能无法很好地与整个应用程序一起使用？

对此有优雅的反应解决方案吗？

TLDR - 我需要帮助弄清楚如何使用 refs 更改子组件颜色。

我试图通过做一个简单的例子来教自己更多关于 React refs 的知识：将子组件中的背景颜色变化与 props 和 refs 进行比较。我意识到这不是野外的最佳实践，但是，对于一个玩具示例，这似乎是一个很好的孤立练习。

我希望能够在我的 App.js 文件中调用 myRef.current.style = { backgroundColor: 'green' } （或类似的东西），但是，当我尝试调用时，myRef.current 似乎为空它。

当我控制台日志时，我得到 {current : null}，但在展开时，组件数据就在那里。我读到这可能是因为 myRef.current 在 compomentDidMount 之后被擦除，但我不确定从这里去哪里。

如果我想继续完成这个例子，对我来说最好的方法是什么？理想情况下，我想我希望能够调用我已注释掉的行或类似的东西。

代码 - https://github.com/ericadohring/ReactRef

I am using React functional components alongside React.memo, but I am experiencing an issue, which in my opinion derives from JavaScript closures. (I am also using Immer for immutability, but I believe it does not affect the situation.)

Below is a simplified version of the situation:

I am using React.memo to avoid unnecessary rerenders of the ChildComponents whose value didn't change, but this way the ChildComponent is storing an old version of the onChange function, which (in my understanding due to JavaScript closures) references an old version of the data.

The result of this is that when I change initially the value of the first ChildComponent and then the value of another ChildComponent, the value of the first ChildComponent is restored to the initial value.

A reproduction of the situation can be found in this sandbox.

After searching the web, a solution that I found to this issue is to use a ref inside the onChange function, to get the up-to-date data, like this:

A sandbox with this solution can be found here.

This solves the issue. But I wanted to ask, is this a correct solution? Or am I using React and React Hooks the wrong way?