在React应用程序中初始化语义ui下拉菜单的位置？

Question

我是React和Semantic UI的新手，最近注意到下拉菜单不起作用。我在哪里以及如何初始化语义下拉列表和其他模块？

我用谷歌搜索它，发现你必须初始化语义模块，但我不知道在我的React应用程序中添加初始化代码的位置。

我发现的代码是：

$('.ui.dropdown').dropdown();

我尝试使用'public'文件夹中'index.html'文件中的代码添加脚本元素，但它仍然无效。然后我发现我可以在className中添加'simple'，但它没有任何选项（选择，按钮）。

我在公共文件夹的index.html文件中包含Semantic UI css：

<link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
    />

App文件中的下拉div：

<div className='ui dropdown'>
  <div className='text'>Example dropdown</div>
  <i className='dropdown icon' />
  <div className='menu'>
    <div className='item'>Example1</div>
    <div className='item'>Example2</div>
  </div>
</div>

预期的结果是在单击“Example1”和“Example2”选项时有一个下拉菜单，但它只是一个带有“示例下拉列表”文本的div。

Answer 1

Semantic-UI使用一个名为jQuery的库来进行DOM操作。你不能使用jQuery with react（你可以在这里阅读更多关于https://hashnode.com/post/why-is-it-a-bad-idea-to-mix-jquery-and-react-cit77t20z02j5fq536wlyiwtk的内容），这样就无法使用SUI JavaScript，但SUI有一个名为semantic-ui-react的反应库，它允许你将所有SUI组件作为反应组件导入，这样你就可以创建您使用以下代码下拉列表

<Dropdown
  placeholder="Example dropdown"
  options={[
    {
      text: "Example1",
      value: "example1"
    },
    {
      text: "Example2",
      value: "example2"
    }
  ]}
/>