Question

嗨，当我在前端有一个条件输出时，是否有可能发出else if ()语句？

当前代码如下：

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

提前致谢

Answer 1

您可以使用conditional operator制作if / else表达式：

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

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

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

这些内容可能难以理解，因此您应该考虑将此代码放在返回语句之上，使用普通的if和elses：

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

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

Answer 2

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

但这有点难读，我建议你改用三元：

    {this.props.contentComponentData.typeOf === 1
      ? <ContentComponentChecklistInstances
        checklistItems={this.props.contentComponentData.checklists}
        />
      : condition
        ? ifConditionMetExpression
        : null
     }

JSX中的javascript elseif案例

2 个答案: