gpt4 book ai didi

javascript - React 无法解构 Edge 中的restProps

转载 作者:行者123 更新时间:2023-12-02 02:59:02 29 4
gpt4 key购买 nike

我遇到了一个问题,但不知何故我无法解决它。我尝试了几个小时的所有方法,但就是找不到解决方案。它适用于较旧的项目,但不适用于使用 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 启动项目,一切都会按预期进行,并且我会看到“酷!”在浏览器中。 (测试定义如下,它是一个返回 div 的简单组件。)

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

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

它在 Chrome 中运行良好,但 Microsoft Edge 说:

SCRIPT1028: SCRIPT1028: Expected identifier, string or number

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

最诚挚的问候和感谢您的帮助!

最佳答案

经过一段时间的搜索,我找到了解决问题的方法。 无需弹出即可工作。

问题和我找到解决方案的方式:

在过去的某个时刻,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"
]
}

我希望这有帮助!

关于javascript - React 无法解构 Edge 中的restProps,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60417760/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com