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

回到顶部