React中如何使用if/switch语句优化JSX条件渲染Message组件代码

优化方案 #

首先需要先明确一个逻辑差异：你当前实现的两段&&判断代码，当errorMessage和invalidEmailError同时存在时，会同时渲染两条Message组件，和最初「优先展示单条内容」的原逻辑不一致，你可以先根据业务需求确认是要单条展示还是多条同时展示，再对应选择优化方案。

方案1：单条优先展示场景（推荐）

用if分支提前计算消息配置，去掉冗余的重复组件代码，逻辑更集中易维护：

// 写在组件return语句之前，可根据需要调整判断顺序控制优先级
let messageProps = null
// 若要优先展示errorMessage的成功提示，把这个判断放前面
if (errorMessage) {
  messageProps = {
    type: 'success',
    content: 'If an account exists'
  }
} else if (invalidEmailError.length > 0) {
  messageProps = {
    type: 'error',
    content: invalidEmailError
  }
}

渲染部分的代码可以简化为：

{messageProps && (
  <Message type={messageProps.type} className="mt-l">
    {messageProps.content}
  </Message>
)}

优势：

• 逻辑集中，后续新增消息类型只要加else if分支即可，不需要重复写Message组件结构
• 优先级明确，调整判断顺序就能修改展示优先级
• 渲染层代码简洁无冗余

方案2：多条同时展示场景

如果业务需要两种提示同时出现，可以把渲染逻辑封装成独立函数，后续扩展更多消息类型时可以搭配switch case使用：

// 写在组件内部
const renderMessages = () => {
  const messageList = []
  if (invalidEmailError.length > 0) {
    // 后续如果错误有多个细分类型，可以在这里加switch case判断
    messageList.push({
      type: 'error',
      content: invalidEmailError
    })
  }
  if (errorMessage) {
    // 成功提示有多个类型同理加switch case
    messageList.push({
      type: 'success',
      content: 'If an account exists'
    })
  }
  return messageList.map((msg, index) => (
    <Message key={index} type={msg.type} className="mt-l">
      {msg.content}
    </Message>
  ))
}

渲染部分直接调用函数即可：

{renderMessages()}

如果后续消息类型扩展到3种及以上，把if替换为switch case判断消息类型会更清晰，你当前只有两种分支用if的可读性已经足够。

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