状態に基づいてアイコンをオンに設定

Question

Reduxの状態に応じて、アイコンを送出するためにonPressをactionと呼び出すように設定しようとしています。

だから

<MaterialIcons 
     name="arrow-upward" size={30} style={mystyles1.myIcon} 
     onPress = this.props.style.name === 'styleNormal' ? 
      {() => this.props.changeStyleNew('styleNew')} : 
      {()=>this.props.changeStyleNormal('styleNormal')} 
    > 
    </MaterialIcons> 

this.props.style.name === 'styleNormal'最初の関数（changeStyleNew）が渡され、そうでない場合は第二（changeStyleNormal）するかどうか。私はこれを達成することができません。

TransformError C:/.../ExtComp02.js: 
JSX value should be either an expression or a quoted JSX text (94:19) 

どうすればこの問題を解決できますか？どうもありがとう。

Answer 1

あなたはあなただけの第三の機能を書いて、if文を使用することができます{}

このような

<MaterialIcons 
     name="arrow-upward" size={30} style={mystyles1.myIcon} 
     onPress = { 
      this.props.style.name === 'styleNormal' ? 
     () => this.props.changeStyleNew('styleNew') : 
     ()=>this.props.changeStyleNormal('styleNormal') 
     } 
    > 
</MaterialIcons> 

Answer 2

中括弧内の式を維持する必要があります。

<MaterialIcons 
    name="arrow-upward" size={30} style={mystyles1.myIcon} 
    onPress={() => { 
    if (this.props.style.name === 'styleNormal') this.props.changeStyleNew('styleNew'); 
    else this.props.changeStyleNormal('styleNormal'); 
    }} 
> 
</MaterialIcons>