在react组件中调用$（）。dropdown

Question

I'm using react version of Semantic-UI in a project and i need to create a custom dropdown component which has slightly different inner html structure than semantic-ui dropdown. So i decided to define a new class to return my desired html structure like this:

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 is loaded using webpack ProvidePlugin :

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

but when i use this component in my codes, the line $('.ui.dropdown').dropdown() gives error :

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

So how can i use .dropdown() function inside my react component?

Answer 1

@MehranTorki you will need to import dropdown function semantic.

and you will need to do something like this

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

to see what this code shows look at this url

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

Please look at the code samples over here for more examples

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

I have copied the whole example but you just need to use the code which has the commented //------ line. And import like the DropDown like I have imported to get things working