Question

我在项目中使用 Semantic-UI 的反应版本，我需要创建一个自定义下拉组件，它具有略微不同的内部html结构而不是语义-ui下拉。所以我决定定义一个新类来返回我想要的html结构，如下所示：

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;

使用webpack ProvidePlugin加载Jquery：

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

但是当我在我的代码中使用此组件时，行$('.ui.dropdown').dropdown()会出错：

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

那么如何在反应组件中使用.dropdown()函数？

Answer 1

@MehranTorki您将需要导入下拉函数语义。

你将需要做这样的事情

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

查看此代码显示的内容，查看此网址

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

请查看此处的代码示例以获取更多示例

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

我复制了整个示例，但您只需要使用带有注释// ------行的代码。像我导入的DropDown一样导入以实现工作

在反应组件中调用$（）。dropdown

1 个答案: