Wie kann diese JSX kompakt machen?

Question

{ 
    this.state.isLoadingInputDropDown && 
    <option value="-1" disabled >Loading...</option > 
} 

{/* TODO : was not able to combine below statements */} 
{ 
    !this.state.isLoadingInputDropDown 
    && <option value="-1" >--Select a Accessorial Charge first --</option> 
} 
{            
    !this.state.isLoadingInputDropDown 
    && this.state.allInputs.length > 0 
    && this.state.allInputs.map(
    (input) => (<option value={input.id} key={input.id}>{input.name}</option>) 
) 
} 

versuchen, diese JSX One-Liner oder etwas Kompaktes zu machen. Ich habe versucht, jede mögliche (was ich denken kann) Struktur

Answer 1

Vielleicht deklarieren Sie den Inhalt vor der Rückkehr jsx.

const dropdown = this.state.isLoadingInputDropDown ? <option value="-1" disabled >Loading...</option > : <option value="-1" >--Select a Accessorial Charge first --</option>; 

const otherOptions = this.state.isLoadingInputDropDown || !(this.state.allInputs.length > 0) ? null : this.state.allInputs.map(
    (input) => (<option value={input.id} key={input.id}>{input.name}</option>) 
); 

return (
    <select> 
     { dropdown } 
     { otherOptions } 
    </select> 
); 

Answer 2

Sie könnten so etwas tun;

return (
    <select> 
     {this.state.isLoadingInputDropDown 
      ? <option value="-1" disabled >Loading...</option> 
      : [{ id: -1, name: '--Select a Accessorial Charge first --'}, ...this.state.allInputs].map(
       (input) => (<option value={input.id} key={input.id}>{input.name}</option>) 
      )} 
    </select> 
) 

Answer 3

Idealerweise teilen die ganze Funktion in zwei Teile:

let options; 

if (this.state.isLoadingInputDropDown) { 
    const defaultOption = <option value="-1" disabled >Loading...</option>; 
    options = [defaultOption]; 
} else { 
    const defaultOption = <option value="-1" >--Select a Accessorial Charge first --</option>; 
    const choices = this.state.allInputs.map(
     (input) => (<option value={input.id} key={input.id}>{input.name}</option>) 
    ) 
    options = [defaultOption, ...choices]; 
} 

return (
    <select> 
     {options} 
    </select> 
); 

Die this.state.allInputs.length > 0 Prüfung ist nicht erforderlich.

Versuchen Sie nicht, dies zu einem Einzeiler zu machen. Es ist nicht wichtig, wie lange Code ist. Das Wichtige ist, es lesbar zu machen. Sie sollten in Erwägung ziehen, diesen Code in mehrere Funktionen aufzuteilen.