如何让 antd 与通过 create-react-app 创建的应用程序一起工作？

Question

我是 React 和 antd 的新手。

我使用 create-react-app 开始了一个新的 React 项目。我安装了 antd (ant.design).

我通过添加一个导入并将其添加到我的渲染中来试用 DatePicker，修改 App.js 如下：

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 中运行。

似乎我缺少一些 polyfills/旧浏览器支持。如果我尝试进行生产构建并提供服务，它也会出现相同的错误。

要让 antd 在浏览器（例如 IE11）上使用通过 create-react-app 创建的应用程序，需要做些什么？

Answer 1

Create-react-app 不包含 polyfill。

我通过安装 core-js 并在 src/index.js 文件中导入我想要的 es6 模块来解决这个问题：

import 'core-js/es6';

您也可以只导入您想要的特定模块：

import 'core-js/es6/function';

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

如何让 antd 与通过 create-react-app 创建的应用程序一起工作？

How to get antd working with app created via create-react-app?

create-react-app

antd