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

将高度设置为auto而不是max-height：

height: 'auto'

max-height应该使用一些措施，如em，%，px等具有特定价值。

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

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

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

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

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

仅当styles返回truthy值时，这将应用this.state.open对象。