包含在 reactjs 中时无法显示 uikit 模式

Question

我想在我的 React 应用程序中使用 uikit 弹出窗口window。

当我在 public/index.html 文件中包含此代码时，模态显示正确：

<a uk-toggle href="#my-id">Teste Modal bg-close:false</a>
<div id="my-id" uk-modal="bg-close: false">
  <div class="uk-modal-dialog uk-modal-body">
    <button class="uk-modal-close-default" type="button" uk-close></button>
    <p>This modal can NOT be close by just clicking outside of it ...</p>
    <p>Please click on the X at the top right to close it.</p>
  </div>
</div>

但是如果我尝试从像这样的反应组件内部使用它，它将不起作用：

<a className="uk-toggle" href="#my-id">Test Modal bg-close:false</a>
<div id="my-id" uk-modal="bg-close: false">
  <div className="uk-modal-dialog uk-modal-body">
    <button className="uk-modal-close-default" type="button" uk-close></button>
    <p>This modal can NOT be close by just clicking outside of it ...</p>
    <p>Please click on the X at the top right to close it.</p>
  </div>
</div>

我可以看到 link 但点击没有任何效果。

我是不是做错了什么？

编辑

我添加了一个 jsfiddle，我确认反应版本仍然无法正常工作... https://jsfiddle.net/umfk8jnc/9/

Answer 1

您必须添加 data- 前缀。这是更新后的 JSFiddle link：https://jsfiddle.net/pd8nt5mx/

NOTE React will work with data-uk-* prefixes only.

来源：https://getuikit.com/docs/javascript#component-usage

包含在 reactjs 中时无法显示 uikit 模式

Unable to have uikit modal show when included in reactjs

modal-dialog

uikit

reactjs