Question

我试图创建一个范围输入，在滑块拇指正上方显示工具提示。

我在线浏览了一些vanilla JS示例，似乎我需要使用元素的宽度才能完成。

所以我只是想知道如何获得元素宽度？

几乎相当于JQuery方法$(element).width()

Answer 1

    class MyComponent extends Component {
      constructor(props){
        super(props)
        this.myInput = React.createRef()
      }

      componentDidMount () {
        console.log(this.myInput.current.offsetWidth)
      }

      render () {
        return (
        // new way - as of React@16.3
        <div ref={this.myInput}>some elem</div>
        // legacy way
        // <div ref={(ref) => this.myInput = ref}>some elem</div>
        )
      }
    }

Answer 2

实际上，最好在自定义挂钩中隔离此调整大小逻辑。您可以这样创建一个自定义钩子：

const useResize = (myRef) => {
  const [width, setWidth] = useState(0)
  const [height, setHeight] = useState(0)

  useEffect(() => {
    const handleResize = () => {
      setWidth(myRef.current.offsetWidth)
      setHeight(myRef.current.offsetHeight)
    }

    window.addEventListener('resize', handleResize)

    return () => {
      window.removeEventListener('resize', handleResize)
    }
  }, [myRef])

  return { width, height }
}

然后您可以像这样使用它：

const MyComponent = () => {
  const componentRef = useRef()
  const { width, height } = useResize(componentRef)

  return (
    <div ref={myRef}>
      <p>width: {width}px</p>
      <p>height: {height}px</p>
    <div/>
  )
}

Answer 3

这基本上是MarcoAntônio对React自定义钩子的回答，但经过修改以初始设置尺寸，而不仅仅是在调整大小之后。

export const useContainerDimensions = myRef => {
  const getDimensions = () => ({
    width: myRef.current.offsetWidth,
    height: myRef.current.offsetHeight
  })

  const [dimensions, setDimensions] = useState({ width: 0, height: 0 })

  useEffect(() => {
    const handleResize = () => {
      setDimensions(getDimensions())
    }

    if (myRef.current) {
      setDimensions(getDimensions())
    }

    window.addEventListener("resize", handleResize)

    return () => {
      window.removeEventListener("resize", handleResize)
    }
  }, [myRef])

  return dimensions;
};

以相同的方式使用：

const MyComponent = () => {
  const componentRef = useRef()
  const { width, height } = useContainerDimensions(componentRef)

  return (
    <div ref={componentRef}>
      <p>width: {width}px</p>
      <p>height: {height}px</p>
    <div/>
  )
}

Answer 4

一种简单且最新的解决方案是使用存储对组件/元素的引用的React React useRef钩子与useEffect钩子结合使用，该钩子在组件渲染时触发。

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

export default App = () => {
  const [width, setWidth] = useState(0);
  const elementRef = useRef(null);

  useEffect(() => {
    setWidth(elementRef.current.getBoundingClientRect().width);
  }, []); //empty dependency array so it only runs once at render

  return (
    <div ref={elementRef}>
      {width}
    </div>
  )
}

Answer 5

这里是@meseern's answer的TypeScript版本，避免了重新渲染时不必要的分配：

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

export function useContainerDimensions(myRef: React.RefObject<any>) {
  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });

  useEffect(() => {
    const getDimensions = () => ({
      width: (myRef && myRef.current.offsetWidth) || 0,
      height: (myRef && myRef.current.offsetHeight) || 0,
    });

    const handleResize = () => {
      setDimensions(getDimensions());
    };

    if (myRef.current) {
      setDimensions(getDimensions());
    }

    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, [myRef]);

  return dimensions;
}

Answer 6

使用hooks：

const MyComponent = () => {
  const ref = useRef(null);
  useEffect(() => {
    if (!ref.current || !ref.current.getBoundingClientRect().width) return;
    console.log('do something with', ref.current.getBoundingClientRect().width);
  }, [ref.current]);
  return <div ref={ref}>Hello</div>;
};

Answer 7

一个好的做法是侦听调整大小事件，以防止在渲染时调整大小，甚至防止可能会影响您的应用程序的用户窗口调整大小。

Answer 8

反应钩子：

import React, { useState, useEffect,useRef } from 'react';
...
const table1ref = useRef(null);
const [table1Size, table1SizeSet] = useState({
  width: undefined,
  height: undefined,
});

useEffect(() => {
    function handleResize() {
      table1SizeSet({
        width: table1ref.current.offsetWidth,
        height: table1ref.current.offsetHeight,
      });
    }
    window.addEventListener("resize", handleResize);
    handleResize();
    return () => window.removeEventListener("resize", handleResize);        
  }, [ ]);
...
<div  ref={table1ref}>

并调用：

{table1Size.width}

当您想使用时。

Answer 9

只是为了补充克里斯托弗的评论。您可以使用“react-use”库来执行此操作。它还会在浏览器调整大小时进行侦听。供参考：https://github.com/streamich/react-use/blob/master/docs/useMeasure.md

import React from 'react';

import { useMeasure } from 'react-use';

const sampleView = () => {
 const [ref, { width }] = useMeasure<HTMLDivElement>();
 console.log('Current width of element', width);
 return <div ref={ref}></div>;
};

export default sampleView;

Answer 10

使用回调参考也许可以以一种更简单的方式来处理。

React允许您将函数传递给ref，该ref返回基础DOM元素或组件节点。参见：https://reactjs.org/docs/refs-and-the-dom.html#callback-refs

const MyComponent = () => {
    const myRef = node => console.log(node ? node.innerText : 'NULL!');
    return <div ref={myRef}>Hello World</div>;
 }

每当底层节点发生更改时，都会触发此函数。更新之间将为null，因此我们需要检查一下。示例：

const MyComponent = () => {
    const [time, setTime] = React.useState(123);
    const myRef = node => console.log(node ? node.innerText : 'NULL!');
    setTimeout(() => setTime(time+1), 1000);
    return <div ref={myRef}>Hello World {time}</div>;
}
/*** Console output: 
 Hello World 123
 NULL!
 Hello World 124
 NULL!
...etc
***/

尽管这不能像这样处理调整大小（我们仍然需要调整大小的侦听器来处理用户调整窗口的大小），但我不确定这是OP所要求的。此版本将处理由于更新而调整节点的大小。

因此，这是一个基于此想法的自定义钩子：

export const useClientRect = () => {
    const [rect, setRect] = useState({width:0, height:0});
    const ref = useCallback(node => {
        if (node !== null) {
            const { width, height } = node.getBoundingClientRect();
            setRect({ width, height });
        }
    }, []);
    return [rect, ref];
};

以上内容基于https://reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node

请注意，钩子返回一个引用回调，而不是传递一个引用。并且我们使用 useCallback 来避免每次都重新创建一个新的ref函数。不是很重要，但被认为是很好的做法。

用法是这样的（基于MarcoAntônio的示例）：

const MyComponent = ({children}) => {
  const [rect, myRef] = useClientRect();
  const { width, height } = rect;

  return (
    <div ref={myRef}>
      <p>width: {width}px</p>
      <p>height: {height}px</p>
      {children}
    <div/>
  )
}

如何获得反应元素的宽度

10 个答案: