Anruf $(). Dropdown innen reagieren Komponente

Question

ich benutze reagieren Version von Semantic-UI in einem Projekt und ich brauche eine benutzerdefinierte Dropdown-Komponente zu schaffen, die leicht unterschiedliche innere HTML-Struktur hat als semantisch-ui Dropdown . Also habe ich beschlossen, eine neue Klasse zu definieren, um meine gewünschte HTML-Struktur wie folgt zurück:

import React from 'react'; 
import {Icon} from 'semantic-ui-react'; 

class CustomDropdown extends React.Component { 

    componentDidMount() { 
     console.log(!!window.jQuery); // outputs 'true', which means jquery is defined 
     $('.ui.dropdown').dropdown(); 
    } 

    render() { 
     return(
      <div className="ui fluid search selection dropdown"> 
       <input name="states" type="hidden"/> 
       <span className="highlight"></span> 
       <span className="bar"></span> 
       <label>Some text</label> 
       <Icon name="dropdown"/> 
       <div className="default text">States</div> 
       <div className="menu"> 
        <div className="item" data-value="AL">Alabama</div> 
        <div className="item" data-value="AK">Alaska</div> 
        <div className="item" data-value="AZ">Arizona</div> 
        <div className="item" data-value="AR">Arkansas</div> 
       </div> 
      </div> 
     ); 
    } 
} 

export default CustomDropdown; 

Jquery geladen wird mit webpack ProvidePlugin:

new webpack.ProvidePlugin({ 
    $: 'jquery', 
    jQuery: 'jquery', 
    'window.jQuery': 'jquery' 
}), 

aber wenn ich diese Komponente in meinen Codes, die Zeile $('.ui.dropdown').dropdown() gibt Fehler:

Uncaught TypeError: $(...).dropdown is not a function

wie kann ich mit .dropdown() Funktion ins ide meine reaktionskomponente?

Answer 1

@MehranTorki müssen Sie Dropdown-Funktion Semantik importieren.

und Sie werden so etwas wie dieses

import React from 'react' 
import { Dropdown } from 'semantic-ui-react' 

// TODO: This is missing functionality for sub-menu here from SUI core examples. 
// The "Publish To Web" item should contain a sub-menu. 

const DropdownExampleDropdown =() => (
    <Dropdown text='File'> 
    <Dropdown.Menu> // ------------------------------- 
     <Dropdown.Item text='New' /> 
     <Dropdown.Item text='Open...' description='ctrl + o' /> 
     <Dropdown.Item text='Save as...' description='ctrl + s' /> 
     <Dropdown.Item text='Rename' description='ctrl + r' /> 
     <Dropdown.Item text='Make a copy' /> 
     <Dropdown.Item icon='folder' text='Move to folder' /> 
     <Dropdown.Item icon='trash' text='Move to trash' /> 
     <Dropdown.Divider /> 
     <Dropdown.Item text='Download As...' /> 
     <Dropdown.Item text='Publish To Web' /> 
     <Dropdown.Item text='E-mail Collaborators' /> 
    </Dropdown.Menu> 
    </Dropdown> 
) 

zu sehen, was dieser Code unter dieser URL

https://react.semantic-ui.com/maximize/dropdown-example-dropdown

Bitte um weitere Beispiele zu den Codebeispielen hier anschaut zeigt tun müssen

https://react.semantic-ui.com/modules/dropdown#dropdown-example-dropdown

Ich habe das ganze Beispiel kopiert, aber Sie müssen nur den Code mit der kommentierten // ------ Zeile verwenden. Und importieren wie die DropDown wie ich importiert habe, um Dinge zum Laufen zu bringen