JSX中的javascript elseif案例

Question

嗨,当我在前端有条件输出时,是否有可能else if ()发表声明？

当前代码如下:

    {this.props.contentComponentData.typeOf === 1
      &&
      <ContentComponentChecklistInstances
            checklistItems={this.props.contentComponentData.checklists}
      />
     }

提前致谢

Answer 1

您可以使用条件运算符来生成if/else表达式:

{someCondition === true ? (
    <TrueComponent/>
) : (
    <FalseComponent/>
)}

如果你想要一个if/elseif/else,你可以将多个条件组合在一起:

{someCondition === true ? (
    <IfComponent/>
) : someOtherCondition === true ? (
    <ElseIfComponent/>
) : (
    <ElseComponent/>
)}

这些东西可能很难阅读,所以你应该考虑使用正常的if和elses将这些代码拉到你的return语句之上:

let component;
if (someCondition === true) {
    component = <IfComponent/>
} else if (someOtherCondition === true) {
    component = <ElseIfComponent/>
} else {
    component = <ElseComponent/>
}

return (
  <div>{component}</div>
);