无法渲染反应组件：ReactJS 意外令牌错误答案

【问题标题】：Can't render react component: ReactJS unexpected token error无法渲染反应组件：ReactJS 意外令牌错误
【发布时间】：2022-01-21 18:14:58
【问题描述】：

我正在尝试动态渲染一个反应组件，但我收到了一个意外的令牌错误，不知道为什么。

错误：

./src/App.js
  Line 9:3:  Parsing error: Unexpected token

   7 | 
   8 | 
>  9 |   <ContactCards
     |   ^
  10 |   contact={{name: "Mr whiskerson", imgurl: "http://placekitten.com/300/300", phone:"04019292", email: "whiskahs@gmail.com"}}
  11 |   />
  12 |

我的代码：

import React from 'react';
import ContactCards from './ContactCards'

function App() {
  return (
    <div className="contacts"


  <ContactCards
  contact={{name: "Mr whiskerson", imgurl: "http://placekitten.com/300/300", phone:"04019292", email: "whiskahs@gmail.com"}}
  />


  <ContactCards
  contact={{name: "Mr Jack Sparrow", imgurl: "http://placekitten.com/300/300", phone:"(252) 9483282)", email: "Jack@sparrow.com"}}
  />

  <ContactCards
  contact={{name: "Mr Jiu Hello Cat", imgurl: "http://placekitten.com/300/300", phone:"(852) 0411928483", email: "JiuCat@school.com "}}
  />
</div>
  );
}

export default App;

【问题讨论】：

标签： reactjs unexpected-token

【解决方案1】：

看起来你没有关闭 div

<div className="contacts"

以结束标记结束标记。

<div className="contacts">

【讨论】：

【解决方案2】：

单花括号用于将 props 传递给组件。您正在使用双花括号而不是使用单花括号

<ContactCards
 contact={name: "Mr whiskerson", imgurl: "http://placekitten.com/300/300", 
 phone:"04019292", email: "whiskahs@gmail.com"}
/>

【讨论】：