reactjs-样式化的组件-IE11支持-无效字符

Question

我已经用Google搜索了我的问题，但实际上我没有找到其他人遇到此问题。因此，也许这只是一个小问题，可以轻松解决。我在styled-components应用中使用了react。我以这种方式使用它：

import React, { Component } from "react";
import styled  from 'styled-components';

const CheckboxContainer = styled.div`
  display: inline-block;
  vertical-align: middle;
  margin-right:5px;
`

这在所有现代浏览器中都很好。正如我在caniuse.com上看到的那样，IE11不支持撇号（`）。

[当我在IE11中打开应用程序时，它引发错误：

这意味着

SCRIPT1014: Invalid character

我知道可以在JS中添加polyfills，但是也可以选择添加此功能吗？我想知道没有找到任何类似的问题，所以也许有一个简单的解决方案，目前我没有看到。非常感谢您的帮助！

Answer 1

您需要添加polyfill才能在IE上工作。将此库添加到index.js文件的开头，并降级为react-scripts版本3.2.0。

import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
import 'core-js/es/map';
import 'core-js/es/set';
import 'raf/polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

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

JavaScript Environment Requirements

react-app-polyfill

Syntax error - IE11 - Polyfill

Answer 2

[Junius L.的解决方案为我工作。

解决步骤：

1. npm install react-app-polyfill
2. 在index.js文件中添加库注意：它可以在不降级“反应脚本”的情况下工作。

3. 更新package.json中的浏览器列表

   “浏览器列表”：{    “生产”： [      “> 0.2％”，      “没死”，      “不是全部op_mini”，      “即11”    ]，    “发展”：[      “> 0.2％”，      “没死”，      “不是全部op_mini”，      “即11”    ]  }