React JS内联样式不适用

Question

render() { 
  const styles = {
    maxHeight: 'auto'
  }
  return (
    <div styleName="sticky-social-share" className={this.state.open ? 'open': null} >
      <ul styleName="sticky-social-share__icons" style={this.state.open ? styles : null}>

我试图为sticky-social-share__icons元素实现内联CSS，但是它无法正常工作。

Answer 1

将高度设置为自动而不是最大高度：

height: 'auto'

max-height应该使用诸如em，%，px等之类的度量来具有特定的值。

height: 'auto',
maxHeight: '300px'

据我了解，您应该使用min-height：

height: 'auto',
minHeight: '300px'

此外，您可以使用和运算符来避免三元运算符：

style={this.state.open && styles}

仅当styles返回真实值时，才会应用this.state.open对象。