我可以有条件地从函数内联应用样式吗？

Question

ZoomedIn为真时，始终定义this.state.transform[ref]。如果zoomIn为真，我希望只运行zoomedIn。这是我的功能：

  zoomedIn () {
    return ['zoomIn', 'addBg', 'zoom', 'removeBg'].includes(this.props.zoom)
  }
  zoomIn (ref) {
    if (this.zoomedIn()) {
      const transform = this.state.transform[ref]
      if (transform.scale > 1.1) {
        return {
          transform: 'translateY(' + transform.offset + 'px) scale(' + transform.scale + ')'
        }
      }
    }
  }

  <div ref='carousel'
    className='carousel' style={{
      ...this.zoomIn('carousel')
    }}
>

我试图这样做，但它抱怨没有定义state.transform。

  zoomedIn () {
    return ['zoomIn', 'addBg', 'zoom', 'removeBg'].includes(this.props.zoom)
  }
  zoomIn (ref) {
      const transform = this.state.transform[ref]
      if (transform.scale > 1.1) {
        return {
          transform: 'translateY(' + transform.offset + 'px) scale(' + transform.scale + ')'
        }
      }
   }

  <div ref='carousel' className='carousel' style={{
      ...this.zoomedIn() && this.zoomIn('carousel')
    }}
>

Answer 1

您可以根据zoomedIn：

的值有条件地渲染不同的JSX

if(zoomedIn()){
  // you know this.state.transform exists here:
  const transform = this.state.transform[ref]
  if (transform.scale > 1.1) {
    return <div 
               ref='carousel'
               className='carousel'
               style={{ 'translateY(' + transform.offset + 'px) scale(' + transform.scale + ')' }}
            />
  }else{
    return <div ref='carousel' className='carousel' />;
  }
}else{
  return <div ref='carousel' className='carousel' />;
}