嗨，当我在前端有条件输出时，是否也有可能else if ()发表声明？
当前代码如下所示：
{this.props.contentComponentData.typeOf === 1
&&
<ContentComponentChecklistInstances
checklistItems={this.props.contentComponentData.checklists}
/>
}
提前致谢
JSX中的javascript elseif案例
IT技术
javascript
reactjs
2021-05-16 07:59:46
2个回答
您可以使用条件运算符来制作 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>
);
{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
}