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

这个问题我之前也踩过，说白了就是React的渲染时序和UIkit初始化没对上。

UIkit依赖真实的DOM节点，但React组件首次渲染时，UIkit可能还没来得及绑定事件。你那个data-uk-toggle写法在纯HTML里没问题，放React里就凉了。

最直接的办法是别用data属性，改用JS手动打开：

import UIkit from 'uikit';



export default function MyModal() {

  const openModal = () => {

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

  };



  return (

    <>

      <button 

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

        type="button"

        onClick={openModal}

      >

        打开弹窗

      </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>

    </>

  );

}

还有一种情况是如果你的UIkit是通过CDN或者全局引入的，记得确保在index.html里先加载了uikit.min.js和uikit.min.css，光import UIkit包不够。

另外提醒一下，关闭按钮的data-uk-close在React里有时候也会失灵，如果点X关不掉，同样改成onClick={() => UIkit.modal('#my-modal').hide()}就行。

你的问题在于 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 方法省心。