Aufruf Funktion innerhalb Bedingung - Reactjs

Question

Ich versuche, Funktion innerhalb Bedingung in Render-Funktion, nur aufrufen, wenn Bedingung wahr ist.

Auf Zeile # 3 des folgenden Codes.

{this.props.xarray.map((heading, index) => 
     {return heading.headingis.toLowerCase().indexOf('mobile') != -1 ? 
      {this.setcheckstate()} //THIS IS FUNCTION 
      <option value="{heading.headingis}" key={index} selected>{heading.headingis}</option> 
      : 
      <option value="{heading.headingis}" key={index}>{heading.headingis}</option> 
     } 
    )} 

Aber diese zurückkehrt Fehler:

Syntax error: this is a reserved word (51:10)

Ich möchte den Zustand ändern, wenn die Bedingung wahr ist.

Answer 1

Warum lässt du die ternarny nicht fallen? Es ist manchmal klarer und sauberer, eine einfache if Anweisung IMO zu schreiben.

{ 
    this.props.xarray.map((heading, index) => { 
    if (heading.headingis.toLowerCase().indexOf('mobile') != -1) { 
     this.setcheckstate(); 
     return <option value="{heading.headingis}" key={index} selected>{heading.headingis}</option> 
    } 

    return <option value="{heading.headingis}" key={index}>{heading.headingis}</option> 
    }) 
} 

Answer 2

Sie müssen die Bedingung außerhalb der Rückgabe setzen, da dies keine gültige Syntax ist.

Answer 3

Es wird so sein, Außen Rückkehr von

const { xarray } = this.props; 

Innerhalb der Rückkehr Methode der Render-Methode machen()

{xarray.map((heading, i) => { 
    const { headingis } = heading; 
    const condition = headingis.toLowerCase().indexOf('mobile') != -1; 
    return (
    condition && this.setCheckState() ? 
     <option value={headingis} key={i} selected>{headingis}</option> : 
     <option value={headingis} key={i}>{headingis}</option> : 
); 
}} 

Ich bin traurig, dass ich die ganze zerstörende tat, aber es ist nur eine Angewohnheit, ich mag sauberen Code. Wenn Sie nur eine ausgewählte basierend auf einer Bedingung anzeigen möchten, können Sie auch so etwas tun.

{xarray.map((heading, i) => { 
    const { headingis } = heading; 
    const condition = headingis.toLowerCase().indexOf('mobile') != -1; 
    return (
    condition && <option 
        value={headingis} 
        key={i} 
        selected={() => this.setCheckState} 
       > 
        {headingis} 
       </option> 
); 
})}