Wie werden semantische UI-Module in React verwendet?

Question

Ich kann nicht scheinen, semantische ui Arbeit innerhalb der React-Komponente zu machen. JQuery funktioniert ordnungsgemäß. Das semantische Akkordeon reagiert jedoch nicht auf Klickereignisse.

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

Eine Möglichkeit, semantische-ui richtig in Ihrem Projekt zu enthalten ist

1º Installieren semantisch-ui von npm

npm install semantic-ui-css --save 

2e Import es nach jquery. Sie haben require zu verwenden, würde import "abgefangene Referenz: jquery" werfen

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

3e In Ihrem Beispiel initialisieren das Akkordeon, nachdem die Komponente

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

Your example working

Answer 2

Autor montiert wurde Semantic-UI-Reagieren Sie hier. Verwenden Sie jQuery nicht in einer React-App. React verwaltet eine virtuelle Repräsentation des DOM, die perfekt mit dem realen DOM synchronisiert sein muss. In einer React-App sollte nur React das DOM manipulieren. JQuery ist eine DOM-Manipulationsbibliothek. Wenn Sie jQuery in einer React-App verwenden, wird React abgebrochen.

diesem Grund habe ich Semantic-UI-React schrieb: http://react.semantic-ui.com/introduction#jquery-free

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

Answer 3

Ich habe ein Kesselblech mit Semantic Ui Reagieren Sie gerade erstellt React. Ich habe einige Anweisungen in README.md eingefügt. Hoffe, das wird helfen https://github.com/kennethmervin01/react-with-semantic