将ref作为道具传递以获取offsetTop

基础概念

在前端开发中，ref 是一个常用的概念，主要用于获取 DOM 元素或组件实例的引用。通过 ref，我们可以直接操作 DOM 元素，调用组件实例的方法，或者获取元素的属性值。

优势

直接操作 DOM：通过 ref 可以直接访问和操作 DOM 元素，这在某些情况下比使用 React 等框架的状态管理更加高效。
调用组件方法：对于自定义组件，可以通过 ref 调用组件内部定义的方法。
获取元素属性：可以方便地获取元素的属性值，如 offsetTop、offsetLeft 等。

类型

在 React 中，ref 可以是以下两种类型之一：

回调 ref：通过传递一个回调函数来创建 ref。
React.createRef()：通过 React.createRef() 方法创建 ref。

应用场景

当需要获取某个 DOM 元素的属性值（如 offsetTop）时，可以使用 ref 来获取该元素的引用，然后调用其属性。

示例代码

以下是一个使用 ref 获取 offsetTop 的示例：

import React, { useRef } from 'react';

function App() {
  const myRef = useRef(null);

  const handleClick = () => {
    if (myRef.current) {
      console.log(myRef.current.offsetTop);
    }
  };

  return (
    <div>
      <div ref={myRef} style={{ height: '100px', backgroundColor: 'red' }}>
        Click me to get offsetTop
      </div>
      <button onClick={handleClick}>Get offsetTop</button>
    </div>
  );
}

export default App;

可能遇到的问题及解决方法

问题：为什么 `ref.current` 是 `null`？

原因：

在组件初次渲染时，ref.current 可能还没有被赋值。
在某些生命周期方法中，ref.current 可能还没有被正确初始化。

解决方法：

确保在组件挂载完成后再访问 ref.current。可以使用 useEffect 钩子来确保在组件挂载后执行某些操作。
确保 ref 正确绑定到目标元素上。

import React, { useRef, useEffect } from 'react';

function App() {
  const myRef = useRef(null);

  useEffect(() => {
    if (myRef.current) {
      console.log(myRef.current.offsetTop);
    }
  }, []);

  return (
    <div>
      <div ref={myRef} style={{ height: '100px', backgroundColor: 'red' }}>
        Click me to get offsetTop
      </div>
    </div>
  );
}

export default App;

参考链接

React 官方文档 - Refs and the DOM

通过以上内容，你应该能够理解 ref 的基础概念、优势、类型、应用场景，以及如何解决常见问题。

页面内容是否对你有帮助？

有帮助

没帮助

将ref作为道具传递以获取offsetTop

、、、、

我有一个组件，我想获取ref并将其传递给其他组件(固定到顶部导航栏，不透明度为0)，以检查此ref的offsetTop是否小于window.pageYOffset，如果是，则更改我的状态，并将导航栏的不透明度设置为问题是当我传递ref时，其他组件将为空，从而导致错误。当它不为空时，我如何传递这个ref？const galleryRef = useRef(null); <div className="

浏览 88提问于2021-04-30得票数 0

1回答

在没有路由器或导航uri的情况下，将单个页面滚动响应为锚。

我不希望在导航栏中有DOM查询，但我看到的问题是，我当前的设置将这些组件作为兄弟，所以创建ref到组件意味着我必须创建一个简陋的中间处理程序来在两个位置之间传递它们。<Projects /> // should have a ref </div>>}; Navibar详

浏览 0提问于2018-12-16得票数 1

1回答

将多个引用传递给子组件

、、

在深入到主要问题之前，我的用例是尝试将滚动处理到所需的部分。我将有导航在左侧和列表的表单部分相对于那些导航在右侧。Navigation和Form Section是子组件。下面是我的代码结构 Parent.js const scrollToRef = ref => window.scrollTo(0, ref.current.offsetTop); </Row> </Grid>

浏览 11提问于2020-03-16得票数 4

回答已采纳

1回答

反应:将参考文献置于上下文中

、、

如何将裁判放在上下文中以减少意大利面代码！={homeRef} /> <Experience ref={experienceRef} /><Services ref={servicesRef} />

浏览 6提问于2022-10-02得票数 -2

1回答

如何在条目列表中设置ref以响应js？

、

我正在尝试获取列表项的offsetWidth，但我的ref.current是空。为什么会这样呢？我创建了一个引用，并将该引用作为道具传递。tabRefs = useMemo( []将refchildren, extraClass

浏览 0提问于2021-07-06得票数 1

回答已采纳

2回答

React forwardRef: ref和其他道具

、、、

父组件： const Parent = (props) => {} 和孩子： constChild = forwardRef((props, ref) => {}) 如果我想向Child传递比r

浏览 11提问于2020-09-21得票数 2

回答已采纳

1回答

如何将道具传递给前方

、、、

我使用转发将库组件传递给另一个库组件。我需要一种方式也传递一些道具到转发，如文本输入标签。我到处找，似乎找不到该怎么做。当我检查道具时，它们不会从父级(AutocompleteDropdown)传递。const SelectorInput = forwardRef((props, ref) => { <TextInput

浏览 12提问于2022-11-01得票数 0

1回答

在类星体(vue 3)中使用支柱进行动态载荷成像

、、、、

我试图将一个道具传递到组件中，以动态加载从数据库中获取的hname图像。我试图使用道具作为一个索引，但我得到了错误。应该很直截了当，但有些地方不对劲。bg-green q-mx-none" </div></template>import { defineProps, ref<

浏览 13提问于2022-10-20得票数 0

4回答

react链接发送道具

、、

<div className="projectItem"> <LazyLoad height={400} offsetTop={0} imageProps={{ alt: this.props.name, ref

浏览 0提问于2018-05-22得票数 0

1回答

如果我们可以在属性中简单地传递创建的ref，为什么我们还需要React forwardRef？

、、

根据react文档，将ref传递给子组件的正确方法如下： React.useEffect(() => { }, []); return <input type="text" ref={ref={inpu

浏览 6提问于2021-11-29得票数 0

3回答

如何在使用redux- TextInput按下next键盘按钮后使用useRef挂钩选择next TextInput

、、、、

我知道我们可以使用react类method.because很容易做到这一点，我们有this.ref。但我不确定如何在功能组件中使用useRef钩子来完成此操作。name="first_name" placeholder="First name" placeholder="Last name"

浏览 0提问于2019-04-19得票数 9

1回答

JSX React 'div | p‘的类型是什么？

、、、

我正在构建一个自定义组件，并希望将元素名称作为道具传递给该组件，例如div或p；一个HTMLElement 问题是它必须是一个块或内联元素 export const MyComponent = props=> { const { tag: Comp } = props} 如您所见，我正在解构prop

浏览 11提问于2019-06-23得票数 0

回答已采纳

2回答

如何在reactjs + typescript (钩子)中使用useRef获得父级的子状态值

、、

我需要通过单击ref按钮来更新还原器值，将子状态值获取给父节点。我尝试将一个ref传递给孩子，但是我收到了类似于以下内容的错误：键入'{ value: string；onChange:调度；ref: MutableRefObject<HTMLInputElement属性'ref‘在'IntrinsicAttributes & Props &{子项目？

浏览 4提问于2020-09-11得票数 0

2回答

一个单独的(不是子组件)组件

book.title.toLowerCase().includes(filter.toLowerCase())); }加载页面时，Books组件调用BooksService().getBooks()获取所有书籍

浏览 2提问于2016-10-14得票数 0

回答已采纳

2回答

React:为组件的一个子级获取DOM位置

、

COMPONENT></table>在component.tsx，内部，我需要获得n个子级的DOM值(offsetTop键：$$typeof，键入，键，参考，道具，_owner，_store <div sty

浏览 2提问于2019-02-12得票数 2

回答已采纳

1回答

内部必需的可选forwardRef - ReactJS

ref在组件内部代码中是必需的，但父组件可以选择将其作为道具发送 // I need to access the ref here but, it's null // when I not pass ref as

浏览 7提问于2020-05-08得票数 0

回答已采纳

3回答

访问React组件的道具

、

好的，所以我正在修改ReactJS，并在简单的例子中工作，一切都很好，我已经觉得它提高了我的工作效率。现在，我正在处理一个简单的React示例，它使用一个应用程序名，并在检测到Enter键按下时将其记录到控制台。一切正常工作，直到我在输入框中输入应用程序名称，然后按enter键，然后在控制台日志中看到的不是输入值，而是“未定义的”值。以下是完整的JS代码： render() { return <div><p>Please inpu

浏览 1提问于2016-06-22得票数 1

回答已采纳

1回答

无法读取未定义的'touched‘的属性

、、、、

我使用Formik在我的React应用程序中创建表单，并使用自定义组件作为输入，如下所示： <Field refmarginBottom: `${scale.s2}rem` }}> </label> <

浏览 13提问于2019-05-06得票数 0

1回答

使用React.cloneElement扩展元素是反模式吗？

、、

该组件包含一个按钮，该按钮将触发弹出窗口显示。因为按钮需要配置--标签、类、属性--我需要将这些配置参数传递给子节点。有两种主要的方式，我认为这种情况发生。传递标签和道具作为属性：把实际的按钮传下去。为了将元素放置到DOM节点，我需要一个ref，所以我必须在PopoverComponent中向按钮元素添加道

浏览 0提问于2018-03-03得票数 8

回答已采纳

2回答

第一次加载调用组件时，使用useRef响应自定义钩子返回null？

、

我创建了一个自定义钩子，以便在组件滚动时将元素回滚到视图中。export const useComponentIntoView = () => { const {current} = ref; window.scrollTo(0, current.offsetTop ); return ref;现在，我在如下所示的功能组件中使用这一点 <div ref={useCo

浏览 6提问于2019-11-22得票数 4

回答已采纳

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

将ref作为道具传递以获取offsetTop

基础概念

优势

类型

应用场景

示例代码

可能遇到的问题及解决方法

问题：为什么 ref.current 是 null？

参考链接

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问题：为什么 `ref.current` 是 `null`？