import React, { useCallback, useState } from 'react';
import {Button } from 'antd'
const maxHeight = 540
const Component = ()=>{
	const [textHeight, setTextHeight] = useState(22)
  const [text, setText] = useState('文本元素')
	const [resizeFF, setResizeFF] = useState({})
	const textEl = useCallback(node => {
		if (node !== null) {
			setTextHeight(node.getBoundingClientRect().height);
		}
	}, [resizeFF]);
	return <div style={{ width:'10em',margin:'30px auto'}} >
		<div ref={textEl} style={{width:'10em',maxHeight, overflow:'auto',border:'1px solid blue'}}>{text}</div>
		<div>当前的高度是:{textHeight}</div>
		<div>最大高度:{maxHeight}</div>
    <Button onClick={() => {
      setText(text.repeat(5))
      setResizeFF({})
    }} disabled={textHeight>=maxHeight} type="primary">点击获取高度</Button>
	</div>
}
export default Component