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

Question

我是新的反应和语义用户界面，最近注意到下拉菜单不工作。在哪里以及如何初始化语义下拉列表和其他模块？

我搜索了它，发现你必须初始化语义模块，但是我不知道在哪里添加初始化代码到我的React应用程序中。

我找到的代码是：

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

我尝试在“公共”文件夹中的“index.html”文件中添加代码的脚本元素，但仍然无法工作。然后我发现我可以在className中添加'simple‘，但是没有任何选项(选择、按钮)。

我在公用文件夹中的index.html文件中包含语义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

语义-UI使用一个名为jQuery的库进行DOM操作。您不能将jQuery与react一起使用(您可以在这里读到更多关于它的https://hashnode.com/post/why-is-it-a-bad-idea-to-mix-jquery-and-react-cit77t20z02j5fq536wlyiwtk)，这样就不可能使用SUI JavaScript了，但是SUI有一个名为semantic-ui-react的react库，它允许您将所有SUI组件作为react组件导入，这样就可以使用下面的代码创建下拉列表

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