问题标签 [use-ref]

我正在尝试创建一个导航栏，当用户单击其中一个链接时，页面会滚动到某个部分。在上面的代码中，每个元素都是我页面的一部分：

'refs' 被声明为如下，使用 useRef 钩子：

我用来滚动的功能如下：

问题是“当前”键始终未定义。当我做这样的事情时：

或者

一切正常。我假设 'ref' 仅适用于 html 'pure' 标签。有没有办法在自定义组件中使用“useRef”挂钩？

免责声明：抱歉英语不好，我不是母语人士。

我的代码：

如上面的代码所示，我使用 useRef 钩子创建了一个引用并将其附加到我的 ParentComponent。现在我通过目标道具传递给 ChildComponent 并使用它在孩子内部进行一些 dom 操作。

问题：对于组件的第一次渲染， 我将ParentReference设为null。（如果我在更改 ParentReference 时强制重新渲染，它将更新并重新渲染整个组件，那么它将具有价值。）

如何在我的子组件中获取 ParentReference 以进行初始渲染？

我正在尝试使用 useRef 钩子和 Typescript 构建 React Dropdown 组件：如果我单击一次切换按钮或单击它外部，它会正确打开并关闭，但是当我想再次打开它时它会关闭。有任何想法吗 ？这是我以某种方式失去参考吗？

这是用法：

https://codesandbox.io/s/react-typescript-obdgs

编辑：更好的解释

上下文：

我从第三台服务器收到一些纯 HTML 代码，我想

• 插入我的 React 应用程序
• 修改它

香草 JS 方法

• 我可以使用正则表达式修改字符串并添加任何 HTML 标记id
• getElementById然后我可以像往常一样通过 修改这些元素

反应方法

• 我不应该使用 DOM
• 然后我应该在字符串中插入一些内部有 React ref 的组件
• 相反（将一些 React 组件插入为纯 HTML）将通过ReactDOMServer.renderToString
• 所以，当我用 注入组件时ReactDOM.render()，问题是该render方法需要时间，所以如果在下一行我尝试使用插入组件中存在的 ref，则还不存在

问题

• 怎么做？通常我会将代码放在useEffect具有[]依赖项的 a 中，但在这里我是rendering应用程序已安装时的组件
• 一个快速的解决方法是只进行 500 毫秒的异步等待，然后我可以访问ref，但肯定有更好的东西

此代码失败，因为在ref呈现时它仍然不可用，因此ref.current未定义

我怎么能等到呢？

密码箱

编辑：我提供了有效的代码，但通过直接 DOM，我认为应该避免

我一直在学习钩子，但一个概念仍然让我感到困惑。

使用 useEffect 时，内部声明的任何变量在下一次重新渲染后都会变旧。要访问 useEffect 中不断变化的值，最常见的答案，也是Dan Abramov 自己使用的一个方法，是改用 u​​seRef 挂钩。

但是，假设您想使用 Redux 之类的东西将一条信息存储在全局状态中，但您还希望该信息在 useEffect 内部的回调函数中可用。在我的特定情况下，当我的组件挂载时，我需要将事件侦听器添加到连接到服务器的 Web 套接字，以发出 WebRTC 连接的信号。Web 套接字侦听器回调函数所需的值将在整个应用程序的使用过程中更新。

如何组织一个全局可访问的状态，但也可以像访问 useRef 生成的 ref 一样被引用？

这是我的意思的一个例子

当客户端从服务器收到他们可以开始广播的响应时，客户端需要准确反映哪些用户在使用应用程序的整个过程中登录。显然，此时的值users是陈旧的，因为即使来自 useSelector 的值也不会在 useEffect 内部更新，尽管它在外部。所以我可以在这里使用 useRef 来实现我想要的，但这不是我使用 users 数组的唯一地方，我不想一遍又一遍地传递一个 ref 作为道具。

我已经阅读了有关使用 useContext 的信息，但是，如果我理解正确，当上下文值发生变化并且整个应用程序正在使用上下文时，就会为整个应用程序触发重新渲染。

有什么想法、建议、解释吗？除了 useEffect 之外，也许还有更好的地方可以将事件侦听器添加到套接字？

提前致谢。

emphasized text

hi im trying to to proof the response of an adserver. To check which typeof response it is im using useRef() and the reference on the div where the iframe will be constructed and send the get request to the adserverhttps://i.stack.imgur.com/3kvMo.png

the ads object looks like :

https://i.stack.imgur.com/fe3aL.png

everytime im refresh the page the console.log statement 'saysomething' gives me 5 times an undefined and then it finds the divs. https://i.stack.imgur.com/2V5bX.png

The problem is i need the innerHTML Value immediately to work with the stored value otherwise, when im trying to go on in an if statement or something different the console say 'can't find value of undefined blah blah....' Did i missed something im stuck here for hour s and need help.

我想获取状态的最新值并使用它内联样式，但它首先返回 0 值，然后渲染更新状态。但是，我无法将值分配给样式。

控制台输出：

我正在尝试将 Relax.js 与 React 一起使用，但无法理解如何使用它。我能找到的只是https://www.npmjs.com/package/relax#target-node。在那个链接中，他们给出了这个代码。

我如何使用带有 React 钩子的代码以及整个组件的外观。这是组件的一个非常狭窄的视图。

我在实现基于 React 的 useRef 的元素的平滑滚动时遇到了麻烦，该元素可以在任何现代浏览器中运行，而不会在动画中出现任何延迟。这似乎很难，这就是我寻求帮助的原因。

尝试使用在 Google Chrome 和 Firefox 中运行良好的scrollIntoView({ behavior: 'smooth', block: 'start' })，但 Safari 似乎不起作用。尝试安装 polyfill ( https://www.npmjs.com/package/smoothscroll-polyfill ) 以支持 Safari 和其他浏览器，但在 Safari 中的 Iphone 8 上进行测试时，由于滚动动画滞后，它还不够好。

考虑创建一个名为ScrollToElement的 util 函数，该函数接受元素 ref 或其他内容并尝试自己对其进行动画处理，但需要一些帮助才能开始，因为我还没有真正玩过 css 动画。

一些可以帮助我解决这个问题的正确方向，所以我可以顺利滚动到在任何浏览器中工作的任何 div 吗？

实用程序功能

我正在做打字稿顺便说一句。

在 useRef 变量中不能设置为输入元素

在<Input ref="">我收到以下错误

任何想法如何解决这个问题。提前致谢

我的完整代码：