React无法在Edge中解构restProps
我有一个问题,但某种程度上我无法解决。我花了几个小时尝试了所有东西,但找不到解决方案。它适用于较旧的项目,但不适用于使用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中的一般错误,因为该项目实际上是用它创建的,并且没有添加任何库。
最好的问候,并感谢您的帮助!
回答:
经过一段时间的搜索,我找到了解决该问题的方法。
在过去的某个时候,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"
]
}
希望对您有所帮助!
以上是 React无法在Edge中解构restProps 的全部内容, 来源链接: utcz.com/qa/428558.html