fai*_*a20 87 javascript reactjs
在React呈现该元素后,如何获得元素的高度？
HTML
<div id="container">
<!-- This element's contents will be replaced with your component. -->
<p>
jnknwqkjnkj<br>
jhiwhiw (this is 36px height)
</p>
</div>
ReactJS
var DivSize = React.createClass({
render: function() {
let elHeight = document.getElementById('container').clientHeight
return <div className="test">Size: <b>{elHeight}px</b> but it should be 18px after the render</div>;
}
});
ReactDOM.render(
<DivSize />,
document.getElementById('container')
);
结果
Size: 36px but it should be 18px after the render
它正在计算渲染前的容器高度(36px).我想在渲染后获得高度.在这种情况下,正确的结果应该是18px.
Pau*_*ang 132
以下是使用ref的最新ES6示例.
请记住,我们必须使用React类组件,因为我们需要访问Lifecycle方法,componentDidMount()因为我们只能确定元素在DOM中呈现后的高度.
import React, {Component} from 'react'
import {render} from 'react-dom'
class DivSize extends Component {
constructor(props) {
super(props)
this.state = {
height: 0
}
}
componentDidMount() {
const height = this.divElement.clientHeight;
this.setState({ height });
}
render() {
return (
<div
className="test"
ref={ (divElement) => { this.divElement = divElement } }
>
Size: <b>{this.state.height}px</b> but it should be 18px after the render
</div>
)
}
}
render(<DivSize />, document.querySelector('#container'))
你可以在这里找到运行的例子:https://www.webpackbin.com/bins/-KkP1HhC_tW4FeoYSuDe
Mr.*_* 14 41
对于那些有兴趣使用的人react hooks，这可能会帮助您入门。
import React, { useState, useEffect, useRef } from 'react'
export default () => {
const [height, setHeight] = useState(0)
const ref = useRef(null)
useEffect(() => {
setHeight(ref.current.clientHeight)
})
return (
<div ref={ref}>
{height}
</div>
)
}
cha*_*rri 15
除了使用document.getElementById(...)，更好（最新）的解决方案是使用 React useRef钩子来存储对组件/元素的引用，并结合使用在组件渲染时触发的useEffect钩子。
import React, {useState, useEffect, useRef} from 'react';
export default App = () => {
const [height, setHeight] = useState(0);
const elementRef = useRef(null);
useEffect(() => {
setHeight(elementRef.current.clientHeight);
}, []); //empty dependency array so it only runs once at render
return (
<div ref={elementRef}>
{height}
</div>
)
}
我 2020 年（或 2019 年）的答案
import React, {Component, useRef, useLayoutEffect} from 'react';
import { useDispatch } from 'react-redux';
import { Toast, ToastBody, ToastHeader } from 'reactstrap';
import {WidgetHead} from './WidgetHead';
export const Widget = ({title, toggle, reload, children, width, name}) => {
let myself = useRef(null);
const dispatch = useDispatch();
useLayoutEffect(()=>{
if (myself.current) {
const height = myself.current.clientHeight
dispatch({type:'GRID_WIDGET_HEIGHT', widget:name, height})
}
}, [myself.current, myself.current?myself.current.clientHeight:0])
return (
<Toast innerRef={myself}>
<WidgetHead title={title}
toggle={toggle}
reload={reload} />
<ToastBody>
{children}
</ToastBody>
</Toast>
)
}
让你的想象力，什么是在这里失踪（WidgetHead），reactstrap是你可以找到关于故宫：更换innerRef用ref的传统的DOM元素（说<div>）。
据说最后一个是同步变化的
useLayoutEffect（或useEffect）第二个参数第二个参数是一个数组，它在执行第一个参数中的函数之前被检查。
我用了
[myself.current,self.current?myself.current.clientHeight:0]
因为在渲染之前我自己.current是空的，这是一件好事，不要检查，最后的第二个参数myself.current.clientHeight是我想要检查的变化。
我在这里解决了网格上的小部件根据自己的意愿改变其高度的问题，并且网格系统应该具有足够的弹性以做出反应（https://github.com/STRML/react-grid-layout）。
它可能显示为零。setTimeout 有助于获取正确的值并更新状态。
import React, { useState, useEffect, useRef } from 'react'
export default () => {
const [height, setHeight] = useState(0)
const ref= useRef(null)
useEffect(() => {
if(elemRef.current.clientHeight){
setTimeout(() => {
setHeight(ref.current.clientHeight)
}, 1000)
}
})
return (
<div ref={ref}>
{height}
</div>
)
}
与钩子一起使用：
如果您的内容尺寸在加载后发生变化，这个答案将会很有帮助。
onreadystatechange：当属于元素或 HTML 文档的数据的加载状态发生更改时发生。当页面内容的加载状态发生更改时，将在 HTML 文档上触发 onreadystatechange 事件。
import {useState, useEffect, useRef} from 'react';
const ref = useRef();
useEffect(() => {
document.onreadystatechange = () => {
console.log(ref.current.clientHeight);
};
}, []);
我试图使用嵌入的 YouTube 视频播放器，其尺寸在加载后可能会发生变化。
| 归档时间： |
|
| 查看次数： |
132378 次 |
| 最近记录： |