Где инициализировать раскрывающееся меню семантического пользовательского интерфейса в приложении React?

Question

Я новичок в React и Semantic UI и недавно заметил, что выпадающие меню не работают.Где и как я могу инициализировать выпадающий модуль Semantic и другие модули?

Я прогуглил его и обнаружил, что вам нужно инициализировать модули Semantic, но я не знаю, куда добавить код инициализации в моем приложении React.

Код, который я нашел:

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

Я пытался добавить элементы скрипта с кодом в файле index.html в папку public, но он все еще не работал,Затем я обнаружил, что могу добавить «простой» в className, и это сработало, но без каких-либо опций (выбор, кнопка).

Я включил css Semantic UI в файл index.html в общей папке:

<link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
    />

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

<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>

Ожидаемый результат - при нажатии кнопки раскрывающегося меню с параметрами «Пример1» и «Пример2», но это простоdiv с текстом «Пример раскрывающегося списка».

Answer 1

Semantic-UI использует библиотеку jQuery для манипулирования DOM.Вы не можете использовать jQuery с реагировать (вы можете узнать больше об этом здесь https://hashnode.com/post/why-is-it-a-bad-idea-to-mix-jquery-and-react-cit77t20z02j5fq536wlyiwtk), что делает невозможным использование SUI JavaScript, но в SUI есть библиотека реагирования semantic-ui-react, которая позволяет вамимпортируйте все компоненты SUI в качестве реагирующих компонентов, чтобы вы могли создать раскрывающийся список, используя следующий код

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