Reactjs 如何使这个JSX紧凑？ { this.state.isloadingInput下拉列表&& 加载。。。 } {/*TODO:无法合并以下语句*/} { ！this.state.isloadingInput下拉列表 &&--首先选择附加费用-- } { ！this.state.isloadingInput下拉列表 &&this.state.allInputs.length>0 &&this.state.allInputs.map( （输入）=>（{input.name}） ) }

试图使这个JSX成为一个线性或紧凑的东西。

---

我尝试了所有可能的（我能想到的）结构

也许您在返回jsx之前声明了内容

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

const dropdown=this.state.isLoadingInputDropDown？加载…：--首先选择一个附加费用--；
const otherOptions=this.state.isLoadingInputDropDown | |！（this.state.allInputs.length>0）？null:this.state.allInputs.map(
（输入）=>（{input.name}）
);
返回(
{下拉列表}
{其他选项}
);

你可以这样做

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

返回(
{this.state.isloadingInput下拉列表
？装载。。。
：[{id:-1，名称：'--首先选择附加费用--'}，…this.state.allInputs].map(
（输入）=>（{input.name}）
)}
) 

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

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

let选项；
if（this.state.isloadingInput下拉列表）{
const defaultOption=加载。。。；
选项=[defaultOption]；
}否则{
const defaultOption=--首先选择附加费用--；
const choices=this.state.allInputs.map(
（输入）=>（{input.name}）
)
选项=[defaultOption，…选项]；
}
返回(
{options}
);

this.state.allInputs.length>0

检查是不必要的

---

不要试图让这成为一个单一的班轮。代码的长度并不重要。重要的是让它可读。你应该考虑把这段代码分解成多个函数。

为什么你想让这个更紧凑？谢谢你提到，匆忙：- DHate说，但如果他没有额外的组件名“代码>选择< /COD>……，它仍然会失败。该死还剩下什么吗-总的来说，你是对的。但是如果你这样做的话，就要避免变异变量，使用语句而不是没有副作用的表达式。@Tobias我没听清你说的。我的意思是：尽量避免使用“let”（let options=…）语句，而使用“const”。这将自动导致对代码样本进行重构，这将用一个更好的方法来分配选项来替换“选项”的突变。

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