React条件渲染图标：可复用消息组件的图标切换实现问询

嘿，我来帮你搞定这个条件渲染的问题！其实在React里实现这个需求有几种简洁的方式，我给你列几个常用的方案：

方案一：直接用三元运算符内联判断 #

这是最直接的写法，在img的src属性里直接根据传入的warning或success属性切换图标：

// 先导入你的图标文件
import warningIcon from './assets/warning-icon.svg';
import successIcon from './assets/success-icon.svg';

const StatusAlert = ({ warning, success, children }) => {
  // 加个小校验：避免用户同时传warning和success
  if (warning && success) {
    console.warn('⚠️ StatusAlert组件只能传入warning或success其中一个属性哦！');
  }

  return (
    <div style={{ position: 'relative', paddingLeft: '60px', minHeight: '48px' }}>
      <img 
        style={{ width: '48px', height: '48px', position: 'absolute', left: 0, top: '50%', transform: 'translateY(-50%)' }}
        src={warning ? warningIcon : success ? successIcon : null}
        alt={warning ? '警告图标' : success ? '成功图标' : ''}
      />
      <div style={{ paddingTop: '8px', paddingBottom: '8px' }}>{children}</div>
    </div>
  );
};

export default StatusAlert;

使用的时候就这么传属性：

// 渲染警告消息
<StatusAlert warning>
  你的密码强度不足，请至少包含8个字符和1个特殊符号！
</StatusAlert>

// 渲染成功消息
<StatusAlert success>
  账户创建成功，现在可以登录啦！
</StatusAlert>

方案二：提前定义图标变量（更易扩展） #

如果以后你想加更多状态（比如info、error图标），这种方式会更清晰，先把图标和alt文本提前赋值：

const StatusAlert = ({ warning, success, children }) => {
  let currentIcon = null;
  let iconAltText = '';

  // 根据传入的属性匹配对应图标
  if (warning) {
    currentIcon = warningIcon;
    iconAltText = '警告图标';
  } else if (success) {
    currentIcon = successIcon;
    iconAltText = '成功图标';
  }

  // 同样的属性校验
  if (warning && success) {
    console.warn('⚠️ StatusAlert组件只能传入warning或success其中一个属性哦！');
  }

  return (
    <div style={{ position: 'relative', paddingLeft: '60px', minHeight: '48px' }}>
      {/* 只有当图标存在时才渲染img标签 */}
      {currentIcon && (
        <img 
          style={{ width: '48px', height: '48px', position: 'absolute', left: 0, top: '50%', transform: 'translateY(-50%)' }}
          src={currentIcon}
          alt={iconAltText}
        />
      )}
      <div style={{ paddingTop: '8px', paddingBottom: '8px' }}>{children}</div>
    </div>
  );
};

进阶：用类型约束避免错误 #

为了让组件更健壮，你可以用prop-types或者TypeScript来强制约束用户只能传入其中一个属性：

用Prop-Types校验 #

import PropTypes from 'prop-types';

StatusAlert.propTypes = {
  warning: PropTypes.bool,
  success: PropTypes.bool,
  children: PropTypes.node.isRequired,
};

// 默认属性
StatusAlert.defaultProps = {
  warning: false,
  success: false,
};

用TypeScript做严格类型约束 #

type StatusAlertProps = 
  | { warning: true; success?: never; children: React.ReactNode }
  | { success: true; warning?: never; children: React.ReactNode };

const StatusAlert = ({ warning, success, children }: StatusAlertProps) => {
  // 组件逻辑和上面一样
};

这样用户如果同时传了warning和success，TypeScript会直接在编译期报错，避免运行时的问题~

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