Question

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

我正在使用Grunt和Babel + Browserify。

我已经通过NPM安装了语义UI。

这是Gruntfile browserify config：

  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，以编译语义UI？

Answer 1

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

带有React＆amp; amp;的语义UI ES6进口

1 个答案: