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

Question

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

错误：

./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;

Answer 1

看起来你没有关闭 div

<div className="contacts"

以结束标记结束标签。

<div className="contacts">

Answer 2

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

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