reactjs - styled-components - IE11 支持 - 无效字符

Question

我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

我知道有可能polyfills在 JS 中添加，但是否也有添加此功能的选项？我想知道我没有找到任何类似的问题，所以也许有一个简单的解决方案，我目前没有看到。

标签： reactjsinternet-explorer-11styled-components

Answer 1

Junius L. 的解决方案对我有用。

解决步骤：

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

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

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