我试图创建一个范围输入，在滑块拇指正上方显示一个工具提示。
我在网上浏览了一些普通的 JS 示例，似乎我需要元素的宽度来完成它。
所以我只是想知道如何获得元素宽度？
几乎等同于 JQuery 方法 $(element).width()
如何获得react元素的宽度
IT技术
reactjs
2021-04-12 04:45:59
6个回答
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>
)
}
}
带钩子：
const MyComponent = () => {
const ref = useRef(null);
useEffect(() => {
console.log('width', ref.current ? ref.current.offsetWidth : 0);
}, [ref.current]);
return <div ref={ref}>Hello</div>;
};
这基本上是 Marco Antô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/>
)
}
实际上，最好在自定义 hook 中隔离此调整大小逻辑。您可以像这样创建自定义钩子：
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/>
)
}
一个简单且最新的解决方案是使用 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>
)
}