带有 React 和 ES6 导入的语义 UI答案

【问题标题】：Semantic UI with React & ES6 imports带有 React 和 ES6 导入的语义 UI
【发布时间】：2016-10-26 22:39:18
【问题描述】：

我正在尝试在我的 React 组件中包含带有 ES6 导入的语义 UI。

我正在使用带有 Babel + Browserify 的 Grunt。

我已经通过 NPM 安装了 Semantic UI。

这里是 Gruntfile browserify 配置：

  grunt.initConfig({
    browserify: {
      dist: {
        options: {
          transform: [
            ['babelify', {
              presets: ['es2015', 'react']
            }]
          ],
          watch: true
        },
        files: {
          './dist/app.js': ['./src/js/app.js']
        }
      }
    },

我已经创建了这样的组件：

import React from 'react'
import $ from 'jquery'
import dropdown from 'semantic-ui'

class Container extends React.Component {
  constructor() {
    super()
    this.state = {
      value: null
    }
  }

  componentDidMount() {
    $('.ui.selection.dropdown').dropdown({
      dataType: 'jsonp',
      apiSettings   : {
        onResponse: function(githubResponse) {
          var
            response = {
              results : []
            }
          ;
          // translate github api response to work with dropdown
          $.each(githubResponse.items, function(index, item) {
            response.results.push({
              name: item.name,
              value: item.id
            });
          });
          return response;
        },
        url: '//api.github.com/search/repositories?q={query}'
      },
      onChange: (value) => {
        this.setState({
            value
        });
      }
    });
  }

  componentDidUpdate() {
      $('.ui.dropdown').dropdown('refresh');
  }

  render() {
      return (
          <div>
              <div>
                  <h2>Dropdown</h2>
                  <div className="ui fluid multiple search selection dropdown">
                      <input type="hidden" name="repo-ids" />
                      <div className="default text">Select Repos</div>
                      <i className="dropdown icon"></i>
                      <div className="menu">
                      </div>
                  </div>
               </div>
              <div>
                  <div className="ui divider"></div>
                  <b>Selected value</b> {this.state.value}
              </div>
          </div>
      );
  }
};

export default Container

但是，当我尝试编译此代码时，我得到：

Error: Cannot find module 'semantic-ui'

有什么帮助吗？我需要以某种方式设置 browserify 来编译 Semantic UI 吗？

【问题讨论】：

我没用过semantic-ui。从他们的网站上，我看到您可能需要这样做：从 'semantic-ui-dropdown' 导入下拉菜单试一试，让我知道它是否有效！
运气不好，得到：Error: Cannot find module 'semantic-ui-dropdown
你能仔细检查你的 package.json 文件是否安装了“semantic-ui”模块吗？因为您的错误表明该模块不存在。还按照@Ashitaka 的建议使用 import { dropdown } from 'semantic-ui'。
是的，我已经通过 NPM 安装了语义 ui，它存在于我的 package.json 中，同样 'import { dropdown } from 'semantic-ui' 也不起作用：/
有趣...你能不能试试 import * from 'semantic-ui'。以防万一……

标签： node.js reactjs browserify babeljs semantic-ui

【解决方案1】：

实际上，Reactjs 有一个单独的 Semantic-UI 库。你需要安装它并在你的 Reactjs 应用程序中使用它。要安装只需执行npm install semantic-ui-react --save 即可找到所有内容。这是其官方网站的链接：semantic-ui-react

【讨论】：