React.js的return方法中如何编写JS代码，解决checkPwd条件渲染编译报错

JSX 中用 {} 包裹的嵌入代码只支持JavaScript表达式（即执行后有返回值的代码片段），你写的 if...else if 属于条件语句，不符合JSX的语法要求，因此触发编译报错。

下面提供3种常用的可行实现方式，可根据实际场景选择：

方案1：使用三元运算符实现多分支判断 #

直接在{}内写三元表达式，符合表达式语法要求：

<FormControl>
  <Stack style={styles.stack}>
    <Input
      type="password"
      placeholder="Confirm Password"
      isInvalid={checkPwd !== "correct"}
    />
    {
      checkPwd === "empty" 
        ? <FormControl.ErrorMessage>Please confirm password.</FormControl.ErrorMessage>
        : checkPwd === "invalid"
        ? <FormControl.ErrorMessage>Password is not strong enough.</FormControl.ErrorMessage>
        : null
    }
  </Stack>
</FormControl>

注：这里同时优化了isInvalid的判断逻辑，原来的三元判断可以直接简化为checkPwd !== "correct"，功能完全一致，代码更简洁。

方案2：使用逻辑与（&&）运算符分条件判断 #

分开写两个独立的条件判断，逻辑更直观：

<FormControl>
  <Stack style={styles.stack}>
    <Input
      type="password"
      placeholder="Confirm Password"
      isInvalid={checkPwd !== "correct"}
    />
    {checkPwd === "empty" && <FormControl.ErrorMessage>Please confirm password.</FormControl.ErrorMessage>}
    {checkPwd === "invalid" && <FormControl.ErrorMessage>Password is not strong enough.</FormControl.ErrorMessage>}
  </Stack>
</FormControl>

方案3：提前在return外部计算要渲染的错误节点 #

如果判断逻辑更复杂，推荐把逻辑抽到return外，JSX代码会更整洁易读：

// 在组件return之前先计算错误提示内容
const renderPwdError = () => {
  if (checkPwd === "empty") {
    return <FormControl.ErrorMessage>Please confirm password.</FormControl.ErrorMessage>
  } else if (checkPwd === "invalid") {
    return <FormControl.ErrorMessage>Password is not strong enough.</FormControl.ErrorMessage>
  }
  return null
}

// return内直接调用方法即可
return (
  <FormControl>
    <Stack style={styles.stack}>
      <Input
        type="password"
        placeholder="Confirm Password"
        isInvalid={checkPwd !== "correct"}
      />
      {renderPwdError()}
    </Stack>
  </FormControl>
)

内容的提问来源于stack exchange，提问作者ComMa915