如何在React中使用语义UI模块？

Question

我似乎无法在React组件中使语义ui正常工作。jQuery正常运行。但是语义手风琴不响应click事件。

import React, { Component } from 'react'
import 'semantic-ui/dist/semantic.min.css'

import $ from 'jquery'
import jQuery  from 'jquery'
window.jQuery = jQuery
import 'semantic-ui/dist/semantic.min.js'

export default class App extends Component{
  render(){
    return(
      <div>
        <h1>Hello, React!</h1>
          <div className="ui slider checkbox">
            <input type="checkbox" name="newsletter" />
            <label>Accept terms and conditions</label>
          </div>
          <div className="ui styled accordion">
  <div className="active title">
    <i className="dropdown icon"></i>
    What is a dog?
  </div>
  <div className="active content">
    <p>A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.</p>
  </div>
  <div className="title">
    <i className="dropdown icon"></i>
    What kinds of dogs are there?
  </div>
  <div className="content">
    <p>There are many breeds of dogs. Each breed varies in size and temperament. Owners often select a breed of dog that they find to be compatible with their own lifestyle and desires from a companion.</p>
  </div>
  <div className="title">
    <i className="dropdown icon"></i>
    How do you acquire a dog?
  </div>
  <div className="content">
    <p>Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.</p>
    <p>A pet shop may be the most convenient way to buy a dog. Buying a dog from a private owner allows you to assess the pedigree and upbringing of your dog before choosing to take it home. Lastly, finding your dog from a shelter, helps give a good home to a dog who may not find one so readily.</p>
  </div>
</div>

      </div>
    )
  }
}

Answer 1

在项目中正确包含语义UI的一种方法是

1º从npm安装语义UI

npm install semantic-ui-css --save

2º将其导入到jquery之后。您必须使用require，import将抛出“未捕获的参考：jquery”

window.$ = window.jQuery = require('jquery')
require('semantic-ui-css/semantic')

3º在您的示例中，在安装组件之后初始化手风琴

componentDidMount(){
    $('.ui.accordion') // You can use a ref here
      .accordion()
    ;
}

您的示例正常工作

Answer 2

Semantic-UI-React的作者在这里。不要在任何React应用程序中使用jQuery。React维护了DOM的虚拟表示，必须与真实DOM保持完美同步。在React应用中，只有React可以操作DOM。JQuery是一个DOM操作库。在React应用程序中使用jQuery将破坏React。

这就是为什么我编写Semantic-UI-React的原因：http : //react.semantic-ui.com/introduction#jquery-free

https://github.com/Semantic-Org/Semantic-UI-React