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>)
  )
}

试图使这个JSX单行或紧凑的东西。我尽力（我能想到的）结构

Answer 1

理想情况下，将整个功能分为两部分：

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>
);

无需this.state.allInputs.length > 0检查。

不要试图让它成为一个单行。代码的长度并不重要。重要的是让它可读。您应该考虑将这段代码拆分为多个函数。

Answer 2

也许你在返回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 3

你可以做这样的事情;

where

如何使这个JSX紧凑？

3 个答案: