Question

我需要在两行中插入文本。我有React组件，但我无法获得更新的高度 - 仅在元素渲染后的高度。这是我的组件

  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>
    )
  }

每次重新渲染后如何获得元素高度？

PS我发现问题：

我应该在这里使用componentDidUpdate（），我不需要在componentDidUpdate（）方法中使用while，因为每当我更新状态时都会触发它。

Answer 1

您注册了触发器componentDidMount。您还应注册componentDidUpdate。

检查此文档以了解反应的生命周期：

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

Answer 2

安装组件后，

componentDidMount仅被调用一次。检查反应生命周期documentation以获取更多信息。

当您的组件状态已更新并正在重新呈现时，再次调用的方法是（按此顺序）：

componentWillReceiveProps()
shouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()

由于您需要在重新渲染组件后重新计算高度，请将逻辑放在componentDidUpdate内，然后设置。

无法在React中获得真正的元素高度

2 个答案: