下拉列表未显示react jsx中的选项

Question

我正在使用带有语义UI的React。在语义UI中，我们需要Javascript才能创建下拉列表。我不确定将JS代码放在哪里。

我尝试按照以下答案放置js文件：Jquery in React is not defined。但它抛出一个错误。

HTML：

<div class="ui dropdown">
    <input type="hidden" name="gender">
    <i class="dropdown icon"></i>
    <div class="default text">Gender</div>
    <div class="menu">
        <div class="item" data-value="male">Male</div>
        <div class="item" data-value="female">Female</div>
     </div>
</div>

Javascript：

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

我需要包括JS库以使其工作吗？如果是，我必须在哪里包括库URL和以上功能？ 如果没有办法，那么有什么办法使它起作用

这是Fiddle链接：http://jsfiddle.net/Dhanapas/4mpb7cfx/2352/ 摆弄它是可以的，但是当我在实际代码中使用它时却不能用。

Answer 1

使用以下命令安装语义UI响应：

npm install semantic-ui-react --save

下面是使用语义ui创建下拉列表的代码：

import React from 'react'
import { Dropdown } from 'semantic-ui-react'

const options = [{ key: 1, text: 'Choice 1', value: 1 }, { key: 2, text: 'Choice 2', value: 2 }]

const DropdownExampleActive = () => <Dropdown text='Dropdown' options={options} open />

export default DropdownExampleActive