如何使这个 JSX 紧凑？答案

【问题标题】：How Can make this JSX compact?如何使这个 JSX 紧凑？
【发布时间】：2018-05-20 07:25:09
【问题描述】：

{
  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 单线或紧凑的东西。我尝试了所有可能的（我能想到的）结构

【问题讨论】：

为什么要让它更紧凑？

标签： reactjs jsx

【解决方案1】：

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

【讨论】：

感谢提及，很着急:-D
讨厌这么说，但是如果他没有一个名为Select .. 的额外组件，它仍然会失败。 :)
该死的……还有什么剩下的吗？ :-D

【解决方案2】：

理想情况下，将整个函数分成两部分：

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 检查不是必需的。

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

【讨论】：

总的来说你是对的。但是，如果您这样做，请避免改变变量并使用不会导致副作用的语句而不是表达式。
@Tobias 我没听懂你说的。
我的意思是：尽量避免使用“let”（let options = ...）语句并使用“const”。这将自动导致代码示例的重构，它将用选项分配替换“选项”的突变，这是更好的方法。

【解决方案3】：

你可以这样做；

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

【讨论】：