React 无法在 Edge 中解构 restProps

IT技术 javascript reactjs microsoft-edge
2021-04-23 07:00:22

我有一个问题，不知何故我无法解决它。我尝试了几个小时，但我只是没有找到解决方案。它适用于较旧的项目，但不适用于使用 create-react-app 创建的全新 React 项目。

考虑以下代码：

应用程序.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在我的测试函数中使用参数，如下所示：

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

它在 chrome 中运行良好，但 Microsoft Edge 说：

SCRIPT1028：SCRIPT1028：需要的标识符、字符串或数字

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

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

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"
    ]
  }

我希望这有帮助！

@TKoL 我想可能会迟早发生……因为在函数 props 中解构并不少见。可悲的是，我找不到他们从预设中删除它的原因。如果您有任何其他问题，请随时在此帖子中标记我！
2021-06-01 07:00:22
可能最终不得不在某个时候自己使用它。
2021-06-06 07:00:22
其它你可能感兴趣的问题
上一篇React js：与其他元素相比，输入元素的呈现方式不同 下一篇警告：Prop `className` 在 Next.JS 站点中与样式化组件不匹配