React无法在Edge中解构restProps [英] React can't deconstruct restProps in Edge

问题描述

我遇到问题，以某种方式无法解决.我花了数小时尝试了所有东西，但找不到解决方案.它适用于较旧的项目，但不适用于通过create-react-app创建的全新的React项目.

I've a problem and somehow I just can't solve it. I tried everything for hours but I just don't find a solution. It worked in older projects, but doesn't work with a brand new react project created with create-react-app.

考虑以下代码:

App.js:

function App() {
  const test = {
    test1: {},
    test2: {}
  };
    return (
        <div className="App">
            Cool!
          <Test
            name1="cool1"
            {...test}
          />
        </div>
    );
}

export default App;

这里没什么大不了的.如果我使用npm start启动项目，那么一切都会按预期进行，并且会看到"Cool！".在浏览器中.(测试在下面定义，它是一个返回div的简单组件.)

Nothing big here. If I start the project with npm start, everything works as expected and I see the "Cool!" in the Browser. (Test is defined below, its a simple component that returns a div.)

现在，如果我尝试在Test的函数参数中使用 ... props ，如下所示:

Now, if I try to use ...props in my function parameters for Test, like this:

export const Test = ({name1, ...props}) => {
    return (
        <div>yay! {props.name1}</div>
    )
};

它在chrome中可以正常工作，但是Microsoft edge说:

It works fine in chrome, but Microsoft edge says:

SCRIPT1028:SCRIPT1028:预期的标识符，字符串或数字

SCRIPT1028: SCRIPT1028: Expected identifier, string or number

我在使用较旧版本的create-react-app创建的较旧项目中使用了此语法，没有任何问题，因此我不太确定问题出在哪里.这甚至可能是create-react-app中的一般错误，因为该项目实际上是用它创建的，并且没有添加任何库.

I use this syntax in older projects, created with older version of create-react-app without any problem, so I'm not too sure where the problem is. Could this even be a general bug in the create-react-app, since the project is literally created with it and has no libraries added to it.

致以最诚挚的谢意，谢谢您的帮助！

Best Regards and thanks for any help!

推荐答案

搜索了一段时间后，我找到了解决该问题的方法.它可以正常运行而不会弹出.

After searching for a while, I found a solution for the problem. It works without ejecting.

问题与解决方案找到解决方案的方式:

在过去的某个时候，react决定从其react-app预设中删除一些babel预设.我将旧项目中的"babel-preset-react-app"(node_modules中的文件夹)与新创建的react应用(使用create-react-app v3.4创建)的babel-presets进行了比较.通过比较两个应用程序的babel-preset-react-app中的package.json，我发现在较新的版本中，安装的babel插件要少得多.

At some point in the past, react decided to remove some babel presets from their react-app presets. I compared the "babel-preset-react-app" (folder inside node_modules) from an older project, with the babel-presets from a newly created react app (created with create-react-app v3.4). By comparing the package.json from the babel-preset-react-app from both applications, I found out that in the newer version, there are much less babel plugins installed.

解决方案:通过运行以下命令安装@ babel/plugin-proposal-object-rest-spread(也许还可以确定@ babel/plugin-transform-spread):

The solution: Install the @babel/plugin-proposal-object-rest-spread (and maybe also the @babel/plugin-transform-spread just to be sure) by running:

npm install @babel/plugin-proposal-object-rest-spread @babel/plugin-transform-spread

完成后，只需将它们作为插件添加到您的react应用程序的package.json中，即可从react导入的预设下面:

Once done, simply add them as plugins inside the package.json of your react app, below the imported presets from react:

"babel": {
    "presets": [ // This line should already be there if you created your project with CRA
      "react-app"
    ],
    "plugins": [
      "@babel/plugin-transform-spread",
      "@babel/plugin-proposal-object-rest-spread"
    ]
  }

我希望这对您有帮助！

这篇关于React无法在Edge中解构restProps的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！