添加JavaScript代碼時如何在Visual Studio中修復意外令牌<

Question

我已在此網站https://codepen.io/mgmarlow/pen/YwJGRe上修改了代碼，使其具有六列而不是兩列，當我將代碼添加到Visual Studio中時，出現語法錯誤。

我嘗試將原始JavaScript代碼從https://codepen.io/mgmarlow/pen/YwJGRe復制並粘貼到此JavaScript驗證網站http://esprima.org/demo/validate.html ，它還說語法錯誤意外令牌<

這可能是一個簡單的問題，但是我對JavaScript不熟悉。

 render () {
return (
  <div className="container">
    <div id="block1" className="container">
      <Card body="Card 3"/>
      <Card body="Card 4"/>
    </div>
        <div id="block2" className="container">
      <Card body="Card 5"/>
      <Card body="Card 6"/>
    </div>            

    <div id="block3" className="container">
      <Card body="Card 1"/>
      <Card body="Card 2"/>
    </div>
    <div id="block4" className="container">
      <Card body="Card 7"/>
      <Card body="Card 8"/>
    </div>
        <div id="block5" className="container">
      <Card body="Card 9"/>
      <Card body="Card 10"/>
    </div>            

    <div id="block6" className="container">
      <Card body="Card 11"/>
      <Card body="Card 12"/>
    </div>
  </div>
    );
  }
}

Answer 1

這是JSX，這是一種Javascript模板語法，可編譯為原始Javascript。 它是React應用程序中最常用的一種在組件內部使用類似HTML語法的方式。

您需要運行Webpack之類的捆綁工具來將JSX編譯為javascript，或者使用原始javascript語法。 例：

var rootElement =
  React.createElement('div', {}, 
    React.createElement('h1', {}, "Contacts")
  )

ReactDOM.render(rootElement, document.getElementById('react-app'))