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

问题描述

我是 React 和 antd 的新手.

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

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

import React, { Component } from 'react';从'./logo.svg'导入标志；导入'./App.css';从'antd'导入{DatePicker}；类 App 扩展组件 {使成为() {返回 (<div className="应用程序"><div className="App-header"><img src={logo} className="App-logo" alt="logo"/><h2>欢迎反应</h2>

<p className="App-intro">首先，编辑 src/App.js;并保存以重新加载.</p><DatePicker/>

);}}导出默认应用程序；

在 Chrome 中它似乎可以工作，尽管样式很奇怪.在 IE11 中，它不会加载，因为它调用了 startsWith 函数(IE11 中不支持 startsWith).但是，ant.design 网站上的 DatePicker 演示适用于 IE11.

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

通过 create-react-app 创建的应用程序，需要做什么才能让 antd 为 IE11 等浏览器工作?

解决方案

Create-react-app 不包含 polyfills.

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

import 'core-js/es6';

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

import 'core-js/es6/function';

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

I'm new to react and antd.

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

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;

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.

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.

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

解决方案

Create-react-app doesn't include polyfills.

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屋！