В раскрывающемся списке не отображаются параметры реагировать JSX

Question

Я использую React с семантическим интерфейсом. В семантическом интерфейсе нам нужен Javascript для создания выпадающего списка. Я не уверен, куда я положил код JS.

Я попытался поместить файл js, выполнив следующий ответ: Jquery в React не определен . но это выдает ошибку.

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

Установить semantic-ui-реакции, используя:

npm install semantic-ui-react --save

Ниже приведен код для создания выпадающего меню с семантическим интерфейсом:

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