Question

当我尝试呈现App组件时，浏览器说有一个unexpected token。调用组件时，我使用了正确的语法，但是仍然出现错误。如果我不正确地调用了该组件，那么在浏览器到达文件末尾之前，我会收到错误消息，因为我以相同的方式调用了所有其他组件。这是我从浏览器收到的消息的屏幕快照，除了我的JavaScript和html文件。

Error message in the console

{/*how to create react comment*/}
const Header = () => {
  return (
    <header>
        <h1>Scoreboard</h1>
        <span className= "stats">Players: 1</span>
    </header>
    )
}

const Player = () => {
return (
  <div className= "player">

      <span className="player-name">Chris</span>
      <Counter />
  </div>

)

}

const Counter = () => {
 return (
   <div className="counter">

       <button className="counter-action decrement"> - </button>
       <span className="counter-score">Chris</span>
       <button className="counter-action increment"> + </button>

   </div>
 )

}

const App = () => {
  return (
    <div className="scoreboard">

       <Header />
    {/*players list*/}
       <Player />
    </div>



  )
}



ReactDOM.render(
{/*the element we want*/}
<App />,
{/*the element we want to append on to*/}
document.getElementById('root')
)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Scoreboard</title>
    <link rel="stylesheet" href="./app.css" />
  </head>
<!-- have to go to a local server http://localhost:8000/ to view your work.
this will have the port 8000, if you want another project on a local server do "python -m SimpleHTTPServer 7800" that will direct it
to port 7800. have to keep command prompt open to use the local server.takes a minute to load -->
  <body>
    <div id="root"></div>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel" src="./app.js"></script>
  </body>
</html>

Answer 1

从ReactDOM.render()删除您的评论

ReactDOM.render(<App />, document.getElementById('root'))

请勿在{{1}}内部传递任何评论。

语法

ReactDOM.render（reactElement，domContainerNode）

供参考，请参阅Reactjs documentation

渲染组件时获取“意外令牌”

1 个答案: