React Select IE 11 - 类型错误：对象不支持属性或方法"分配"

Question

此代码有什么问题... IE 11投掷TypeError：对象不支持属性或方法"分配" ... Chrome的行为正常

import React from 'react';
import Select,{components} from 'react-select';
import { colourOptions } from '../react-select_Samples/data.js';
const Option = props => { 
    return ( <div>
        <components.Option {...props}><input type="checkbox" checked={props.isSelected} onChange={() => null} />{props.label}
        </components.Option></div> ); 
    };
export class SampleDropdown extends React.Component {
    render() {       
        return (
            <Select
              className="basic-single"
              classNamePrefix="select"
              defaultValue={colourOptions[4]}
              isSearchable
              name="color"
              options={colourOptions}
              components={{ Option}}              
              hideSelectedOptions={false}
              isMulti
            />
        );
    }
}

这是软件包。它有以下包裹" bootstrap(^3.4.1(，es6 promise-promise(^1.0.0(，react(^16.8.6(，react-bootstrap(^0.31.5(，react-dom(^16.8.6(，react-Router-bootstrap(^0.25.0(，React-Router-dom(^5.0.0(，react-scripts(3.0.0(，react-select(^2.4.3(，rimraf(^2.6.3(，whatwg-fetch(^3.0.0"

(

{
  "name": "reports_react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "bootstrap": "^3.4.1",
    "es6-promise-promise": "^1.0.0",
    "react": "^16.8.6",
    "react-bootstrap": "^0.31.5",
    "react-dom": "^16.8.6",
    "react-router-bootstrap": "^0.25.0",
    "react-router-dom": "^5.0.0",
    "react-scripts": "3.0.0",
    "react-select": "^2.4.3",
    "rimraf": "^2.6.3",
    "whatwg-fetch": "^3.0.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

Answer 1

正在构建React应用程序(DEV或PROD(时，将转换为Object.assign分配。

解决方案是使用babel-polyfill软件包，并在您的入口点顶部(默认情况下为index.js(导入以确保正确的功能。

---

另一种解决方案是使用yarn eject弹出您的React应用程序，这将使您能够配置应用程序的构建过程。您可能必须删除node_modules文件夹并重新安装您的软件包。

弹出后，您必须使用yarn add @babel/plugin-transform-object-assign --dev安装@babel/plugin-transform-object-assign软件包，然后在属性babel下将以下内容添加到您的package.json：

{
    ...
    "babel": {
        "presets": ["react-app"],
        "plugins": ["@babel/plugin-transform-object-assign"]
    }
    ...
}

或任何babel配置文件的以下内容：

{
    "presets": ["react-app"],
    "plugins": ["@babel/plugin-transform-object-assign"]
}

这将转换所有Object.assign，以便它们可以在不支持的环境中使用(例如IE11(。

弹出对于此方法是必要的，因为Facebook具有其create-react-app内置的配置，以提供功能默认值。