如何让 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屋!