antd不起作用（沒有任何錯誤！）

Question

我正在使用最新版本的react和react-dom（16.4.2）和antd（3.8.2）。

我的文件如下：

的index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>React Project</title>
  <link href="/assets/stylesheet/stylesheet.css" rel="stylesheet" type="text/css">
</head>

<body>
  <div id="main" >
  </div>
  <script src="/build/bundle.js"></script>
</body>

</html>

main.js

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import {Select} from 'antd';
class App extends Component {
  render() {
    return (
      <div>
        salam
        <Select>
          <Option value="lucy">lucy</Option>
        </Select>
      </div>
    )
  }
}

ReactDOM.render(<App/>, document.getElementById('main'));

gulpfile.js

var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');
// New Plugin
var notify = require('gulp-notify');
var util = require('gulp-util');
var watchify = require('watchify')
var buffer = require('vinyl-buffer');
var uglify = require('gulp-uglify');

gulp.task('browserify', function () {
  return browserify('./assets/scripts/main.js')
    .transform(babelify, {
      presets: ["es2015", "react"],
      "plugins": [
        ["import", {
          "libraryName": "antd",
          "style": "css"
        }]
      ]
    })
    .bundle()
    .on('error', function (e) {
      console.log(e.message);
      this.emit('end');
    })
    .pipe(source('bundle.js'))
    .pipe(buffer())
    .pipe(uglify())
    .pipe(gulp.dest('./build'));
});


gulp.task('watch', ['browserify'], function () {
  gulp.watch('./assets/scripts/**/*.js', ['browserify']);
});

問題：問題是，當我運行gulp gulp watch和gulpfile開始監視，然后在瀏覽器中時，除了以下警告之外，它沒有任何錯誤：

bundle.js：8688您正在使用整個antd軟件包，請使用https://www.npmjs.com/package/babel-plugin-import減小應用程序軟件包的大小。

我只是在瀏覽器中看到了“ salam”，而沒有看到任何選擇/選項組件。 我應該如何解決此代碼？

Answer 1

嘗試添加此行。 在官方示例中使用了它，如果不插入它，則會出錯。

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import {Select} from 'antd';

const Option = Select.Option;

class App extends Component {
   render() {
      return (
      <div>
         salam
            <Select>
                <Option value="lucy">lucy</Option>
            </Select>
      </div>
      )
   }
}

antd不起作用（沒有任何錯誤！）

問題描述

1 個解決方案

解決方案1
0 2018-08-22 05:51:53

antd不起作用（沒有任何錯誤！）

問題描述

1 個解決方案

解決方案1 0 2018-08-22 05:51:53

解決方案1
0 2018-08-22 05:51:53