React类组件动态添加className时如何避免未传prop出现undefined问题

解决方案 #

你可以通过以下几种常用方式避免出现undefined：

方式1：给组件prop设置默认值（最符合React规范的做法）

在你的类组件上添加defaultProps静态配置，指定customClassName未传递时的默认值为空字符串：

class LiveChat extends React.Component {
  // 组件原有逻辑保持不变
  render() {
    return <div className={"chat-box " + this.props.customClassName}>CHAT</div>
  }
}
// 新增默认prop配置
LiveChat.defaultProps = {
  customClassName: ''
}

方式2：在拼接className时做兜底处理

直接在渲染的className拼接逻辑里加空值兜底，不需要修改组件其他配置：

• 基础写法：用短路运算符做兜底

  <div className={"chat-box " + (this.props.customClassName || '')}>CHAT</div>
  

• 更稳妥的空值合并写法（仅当值为undefined/null时才返回空字符串，避免误过滤0、false等合法值）：

  <div className={"chat-box " + (this.props.customClassName ?? '')}>CHAT</div>
  

方式3：数组过滤写法（避免多余空格）

如果不希望未传prop时className里出现多余的尾部空格，可以用数组过滤后拼接的写法：

<div className={['chat-box', this.props.customClassName].filter(Boolean).join(' ')}>CHAT</div>

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