UIkit 的 Modal 在 React 中无法正常打开怎么办？

Designer°春艳提问于 2026-03-14 12:40:24 阅读 2

框架

我在 React 项目里引入了 UIkit，想用它的 Modal 组件，但点击按钮完全没反应，控制台也没报错。我按照文档加了 data-uk-modal 属性，也引入了 JS 文件，是不是哪里写错了？

这是我的代码：

import UIkit from 'uikit';

export default function MyModal() {
  return (
    <>
      <button className="uk-button uk-button-default" type="button" data-uk-toggle="target: #my-modal">
        打开弹窗
      </button>
      <div id="my-modal" data-uk-modal>
        <div className="uk-modal-dialog">
          <button className="uk-modal-close-default" type="button" data-uk-close></button>
          <div className="uk-modal-header">标题</div>
          <div className="uk-modal-body">内容</div>
        </div>
      </div>
    </>
  );
}

我来解答赞 5 收藏

反馈

1 条解答

闲人启腾 Lv1

你的问题在于 React 和 UIkit 的初始化时机没对上。UIkit 需要在 DOM 渲染完成后才能生效，但 React 里你光写了 data-uk-toggle 属性，它可不会自动帮 UIkit 初始化。

最直接的办法是放弃 data 属性，用 JS 手动控制：

import UIkit from 'uikit';

import 'uikit/dist/css/uikit.min.css';

import { useEffect, useRef } from 'react';



export default function MyModal() {

  const modalRef = useRef(null);



  useEffect(() => {

    UIkit.modal(modalRef.current);

  }, []);



  return (

    <>

      <button 

        className="uk-button uk-button-default" 

        type="button"

        onClick={() => UIkit.modal('#my-modal').show()}

      >

        打开弹窗

      </button>



      <div id="my-modal" ref={modalRef} data-uk-modal>

        <div className="uk-modal-dialog">

          <button 

            className="uk-modal-close-default" 

            type="button"

            onClick={() => UIkit.modal('#my-modal').hide()}

          />

          <div className="uk-modal-header">标题</div>

          <div className="uk-modal-body">内容</div>

        </div>

      </div>

    </>

  );

}

核心改动就几点：

用 useEffect 在组件挂载后调用 UIkit.modal() 初始化。按钮的点击改成 onClick 手动调用 show()，关闭按钮同理用 hide()。这样 UIkit 才能正确绑定事件。

如果你非想用 data 属性也不是不行，但得在 useEffect 里手动触发 UIkit 的事件绑定，而且容易出各种奇怪问题，不如直接用 JS 方法省心。

2026-03-14 13:01