Question

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

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

我找到的代码是：

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

我尝试在'public'文件夹的'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”选项的下拉菜单，但这只是带有“ Example dropdown”文本的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组件作为反应组件，因此您可以使用以下代码创建下拉列表

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

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

1 个答案: