関数からインラインでスタイルを条件付きで適用できますか？

Question

ZoomedInが真の場合、常にthis.state.transform[ref]が定義されます。 zoomedInが真である場合にのみ、zoomInを実行します。ここに私の関数は以下のようになります。

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

あなたは条件付きで異なるJSXはzoomedInの値が与えられたレンダリングすることができます：あなたは、現在のコンポーネントのスコープにzoomInをバインドしました

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' />; 
}