基于组件渲染高度的反应setState

问题描述：

我正在制作一个组件，它应根据组件的实际高度设置类。例如：基于组件渲染高度的反应setState

高度>maxHeight： <div className='greater-than-max-height' />

身高< = maxHeight： <div className='less-than-max-height' />

组件的高度仅在componentDidMount已知的。不建议在componentDidMount中执行setState，因为它会导致重新渲染。你如何解决这个问题？

你仍然需要一个无论如何重新渲染，不然你怎么能呈现' div'你想要的类名 – CodinCat

是的，b如何做到这一点？在componentDidMount中做'setState'是唯一的方法吗？ –

目前这是我可以想象的唯一方法，也许有更好的解决方案。 – CodinCat

答

最简单的解决方案，是把setState放在componentDidMount。因为无论如何你都需要重新渲染。对于一个简单的组件，重新渲染并不昂贵。

但是，如果你的组件结构很复杂，并且有些孩子需要计算，最好在子组件中实现shouldComponentUpdate（或者简单地使用PureComponent）。

另一种解决方案是直接操纵真实的DOM。它看起来脏脏的，但你获得最佳的性能（你能保证不存在不必要的组件呈现，也不DOM更新）

componentDidMount() { 
    const height = getHeight() 
    const div = document.getElementById('yourDivId') 
    if (height > MAX_HEIGHT) { 
    div.className = 'greater-than-max-height' 
    } else { 
    div.className = 'less-than-max-height' 
    } 
}

请注意，如果您的组件可以更新和改变其高度和要更新的类名，您还需要为此在componentDidUpdate（两种解决方案需要）

您可以提取一个函数：

updateDivClass() { 
    const height = getHeight() 
    const div = document.getElementById('yourDivId') 
    if (height > MAX_HEIGHT) { 
    div.className = 'greater-than-max-height' 
    } else { 
    div.className = 'less-than-max-height' 
    } 
} 

componentDidMount() { 
    this.updateDivClass() 
} 

componentDidUpdate() { 
    this.updateDivClass() 
}

基于组件渲染高度的反应setState

相关推荐