如何让antd与通过create-react-app创建的应用一起使用? [英] How to get antd working with app created via create-react-app?

问题描述

我是新来的反应者和蚂蚁.

I'm new to react and antd.

我使用create-react-app启动了一个新的react项目.我安装了antd(ant.design).

I started a new react project using create-react-app. I installed antd (ant.design).

我通过添加导入并将其添加到渲染器中来尝试DatePicker，如下修改App.js:

I tried out the DatePicker by adding an import and adding it to my render, modifying App.js as follows:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

import { DatePicker } from 'antd';

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <DatePicker/>
      </div>
    );
  }
}

export default App;

虽然样式很奇怪，但在Chrome中似乎可以正常工作. 在IE11中，由于startsWith函数调用(在IE11中不支持startsWith)，因此无法加载.但是，ant.design网站上的DatePicker演示可在IE11中使用.

In Chrome it seems to work, although the styling is weird. In IE11 it doesn't load because of a startsWith function call (startsWith not supported in IE11). However, the DatePicker demo at the ant.design website works in IE11.

似乎我以某种方式缺少一些polyfills/旧的浏览器支持.如果我尝试进行生产构建并为其提供服务，那么它也会出现相同的错误.

It seems I'm missing some polyfills / old browser support somehow. If I try to do a production build and serve that, it also has the same error.

要通过通过create-react-app创建的应用程序来使ant能够在IE11等浏览器上工作，需要做些什么?

What needs done to get antd working for browsers such as IE11 with an app created via create-react-app?

推荐答案

Create-react-app不包含polyfills.

Create-react-app doesn't include polyfills.

我通过安装 core-js 并导入所需的es6模块来解决此问题src/index.js文件:

I worked around this by installing core-js and importing the es6 module I wanted in the src/index.js file:

import 'core-js/es6';

您还可以仅导入所需的特定模块:

You can also import only the specific module you want:

import 'core-js/es6/function';

我推荐第一个，因为您很可能最终会在整个应用程序中使用更多功能.

I recommend the first, since you'll most likely end up using more functions throughout your app.

这篇关于如何让antd与通过create-react-app创建的应用一起使用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！