Question

我似乎无法在React组件中使语义ui工作。 JQuery正常工作。但语义手风琴不响应点击事件。

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()
    ;
}

Your example working

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

Answer 3

我刚刚用Semantic Ui React创建了一个React Boiler Plate。我在README.md中添加了一些内容。希望这会有助https://github.com/kennethmervin01/react-with-semantic

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

3 个答案: