无法呈现反应组件：ReactJS 意外令牌错误

Question

我正在尝试动态呈现 React 组件，但出现意外的标记错误，我不确定原因。

错误：

./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"}
/>

无法呈现反应组件：ReactJS 意外令牌错误

Can't render react component: ReactJS unexpected token error

reactjs

unexpected-token