Reactstrap OffCanvas报错：Transition的nodeRef属性类型不符求解决

这个报错的核心原因是Reactstrap的Offcanvas组件依赖的Transition组件要求nodeRef必须是React ref对象，但当前组件内部传递的是函数类型的ref，不符合类型校验规则。

解决方案 #

创建一个React ref对象，通过nodeRef属性传递给Offcanvas组件即可解决问题，同时确保你的reactstrap版本为v9+，并搭配兼容的react-transition-group版本（推荐v4+）。

修改后的代码示例 #

import { useRef } from 'react';
import { Button, Offcanvas, OffcanvasBody, OffcanvasHeader } from 'reactstrap';

function App() {
  // 创建ref对象
  const offcanvasRef = useRef(null);

  return (
    <div className="container mt-3 p-1">
      <div>
        <Button
          color="primary"
          onClick={function noRefCheck() { }}
        >
          Open
        </Button>
        <Offcanvas
          isOpen={true}
          toggle={function noRefCheck() { }}
          // 将ref传递给nodeRef属性
          nodeRef={offcanvasRef}
        >
          <OffcanvasHeader toggle={function noRefCheck() { }}>
            Offcanvas
          </OffcanvasHeader>
          <OffcanvasBody>
            <strong>
              This is the Offcanvas body.
            </strong>
          </OffcanvasBody>
        </Offcanvas>
      </div>
    </div>
  );
}

export default App;

说明 #

通过useRef创建的ref对象符合Transition组件对nodeRef的类型要求，传递后即可通过prop类型校验，消除控制台报错。

内容的提问来源于stack exchange，提问作者Sakhawat Hossain Sohel