Question

此代码有什么问题... IE 11抛出 TypeError：对象不支持属性或方法'assign'... 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
            />
        );
    }
}

这是package.json ... 它具有以下软件包 “ 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应用（开发或生产）时，spread operations被转换为Object.assign分配。

一种解决方案是使用babel-polyfill软件包并直接在入口点的顶部（默认为index.js）进行导入，以确保功能正确。

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

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

{
    ...
    "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的配置以提供正常的功能。

React Select IE 11-TypeError：对象不支持属性或方法“ assign”

1 个答案: