javascript - Can't get real element height in React -

i need fit text in 2 rows. have react component can't updated height - height after element rendered. component

  constructor (props) {     super(props)      this.state = {       text: props.text     }   }    componentdidmount() {     let element = reactdom.finddomnode(this)     let parent = element.parentnode     let originaltext = element.innertext     let containerheight = parent.offsetheight     let temp = originaltext     if (containerheight < element.offsetheight) {        while(containerheight < reactdom.finddomnode(this).offsetheight) {            temp = temp.substr(0, temp.length-1)            this.setstate({              text: temp            })            i++            console.log(temp,containerheight,reactdom.finddomnode(this).offsetheight);        }         temp = temp.substr(0, temp.length-4) + '...'         this.setstate({          text: temp        })      }   }     render() {     return (       <span>         {this.state.text}       </span>     )   } 

how can element height after each re-render?

ps found problem:

i should use componentdidupdate() here , don't need use while in componentdidupdate() method, because it's triggered each time when updated state.

you registered trigger componentdidmount. should register componentdidupdate.

check document understand lifecycle in react:

https://busypeoples.github.io/post/react-component-lifecycle/