UIkit Offcanvas 在 React 中无法正常关闭？

轩辕一茹提问于 2026-03-25 18:04:25 阅读 47

组件

我在 React 项目里用 UIkit 的 Offcanvas 做侧边栏，点击按钮能打开，但点遮罩或关闭按钮就是关不掉。控制台也没报错，UIkit 的 JS 文件也引入了，是不是哪里没绑定对？

我试过用 UIkit.offcanvas('#offcanvas').hide() 手动调用，但还是没反应。代码结构大概这样：

import UIkit from 'uikit';

function App() {
  const openOffcanvas = () => {
    UIkit.offcanvas('#my-offcanvas').show();
  };

  return (
    <>
      <button onClick={openOffcanvas}>打开侧边栏</button>
      <div id="my-offcanvas" uk-offcanvas="overlay: true">
        <div className="uk-offcanvas-bar">
          <button className="uk-offcanvas-close" type="button" uk-close></button>
          <p>内容</p>
        </div>
      </div>
    </>
  );
}

前端框架

我来解答赞 11 收藏

反馈

1 条解答

UX照南 Lv1

问题出在 UIkit 的初始化和 React 的生命周期上。你需要在组件挂载时显式初始化 Offcanvas 实例，不然默认的关闭事件绑定不上。改一下就行：

import UIkit from 'uikit';

import { useEffect } from 'react';



function App() {

  useEffect(() => {

    // 组件挂载后初始化

    const offcanvas = UIkit.offcanvas('#my-offcanvas');

    

    // 清理函数，在组件卸载时销毁实例

    return () => offcanvas.$destroy();

  }, []);



  const openOffcanvas = () => {

    UIkit.offcanvas('#my-offcanvas').show();

  };



  return (

    <>

      

      

        

          

          内容


        


      


    

  );

}

记得把 UIkit 样式也引入，这代码应该就能正常工作了。React 和 UIkit 搭配有时候就是得这么处理生命周期的事儿，挺烦人的，但没办法。

2026-03-25 20:14