如何在反应中使用带有样式组件的 document.getElementById()？

Posted 2023-02-22

【中文标题】如何在反应中使用带有样式组件的 document.getElementById()？

【英文标题】：How to use document.getElementById() with styled components in react?

【发布时间】：2021-09-21 08:21:44

【问题描述】：

我想在我的 react 项目中使用像 document.getElementById() 这样的 JS 函数。我是样式化组件的新手，不知道如何将这些功能与它们一起使用。 不要参考官方的'styled-components'页面，我已经看过了。

【问题讨论】：

元素有ID吗？如果是这样，你可以使用它

我知道 id 参数，但我应该把这个语句放在哪里？那是里面react函数return()还是外面？

元素创建后？

【参考方案1】：

您可以为此使用useRef react Hook。

const reqElement = React.useRef(null);

现在，您可以在所需元素中添加ref=reqElement。

之后你可以使用reqElement.current 来做那些你可以在javascript 中通过document.getElementById() 做的事情。

useRef hook refrence

【讨论】：

这真的很有帮助，我终于解决了我的问题。谢谢。

当你想在 React 中保持对元素的引用时，这是正确的方法

【参考方案2】：

我终于在这里找到了我的问题的答案。我将收集到的信息分为以下几点。

样式化组件确实有一个 id 参数，但我们不得在 react 中使用它来实现 DOM 功能，因为 react 背后的主要动机是防止真实 DOM 中的频繁更改。 我们可以在 React 功能组件中使用 useRef() 钩子在 React 中传递引用。 （请看上面 Dibas 的回答。） 我犯了一个错误，没有使用 useState() 挂钩来存储组件的状态，而是使用了标识符，这是错误的，因为 useState 有助于每当状态改变时重新渲染组件。 在 useEffect() 挂钩中使用清理函数来防止内存泄漏。

这里是视差效果视频https://youtu.be/Q5y6pwoE3cM的链接，希望对您有所帮助。