React无法在Edge中解构restProps

小编典典

React无法在Edge中解构restProps

reactjs

我有一个问题，但某种程度上我无法解决。我花了几个小时尝试了所有东西，但找不到解决方案。它适用于较旧的项目，但不适用于使用create-react-
app创建的全新React项目。

考虑以下代码：

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的简单组件。）

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

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

它在chrome中工作正常，但是Microsoft edge说：

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

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

最好的问候，并感谢您的帮助！

阅读 930

2020-07-22

共1个答案

小编典典

经过一段时间的搜索，我找到了解决该问题的方法。 它可以正常工作而不会弹出。

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

在过去的某个时候，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插件要少得多。

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

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

完成后，只需将它们作为插件添加到您的react应用程序的package.json中，即可从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"
    ]
  }

希望对您有所帮助！

2020-07-22