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

Question

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

我试图通过以下答案来放入js文件： 未定义React中的jQuery 。 但它抛出一个错误。

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和以上功能？ 如果没有办法，那有什么办法使它起作用

这是小提琴的链接： http : //jsfiddle.net/Dhanapas/4mpb7cfx/2352/在小提琴中，它起作用了，但是当我在实际代码中使用它时却不起作用。

Answer 1

使用以下命令安装semantic-ui-react：

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