CSSTransition组件报错：`in`属性传入函数，期望布尔值类型

报错提示Invalid prop 'in' of type 'function' supplied to 'CSSTransition', expected 'boolean'，核心问题是你传给SideDrawer的show属性不是布尔值，而是一个函数，而CSSTransition的in属性必须接收布尔值来控制过渡状态。

解决步骤： #

• 检查父组件传递show的代码，确保传递的是布尔状态值，不是状态更新函数。
  错误示例（把更新函数当成状态传了）：

  const [showDrawer, setShowDrawer] = useState(false);
  // 错误：传了setShowDrawer（函数）而非showDrawer（布尔值）
  <SideDrawer show={setShowDrawer}>...</SideDrawer>
  

  正确示例：

  const [showDrawer, setShowDrawer] = useState(false);
  // 正确：传递布尔状态值showDrawer
  <SideDrawer show={showDrawer}>...</SideDrawer>
  

• 可选：给SideDrawer添加类型校验，提前发现错误
  安装prop-types后，在组件里添加校验：

  import PropTypes from 'prop-types';
  
  SideDrawer.propTypes = {
    show: PropTypes.bool.isRequired,
    children: PropTypes.node,
  };
  

• 可选：设置默认值，避免未传show时出错

  const SideDrawer = ({ show = false, children }) => {
    // ...原有代码
  };
  

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