前提・実現したいこと
Reactを用いて簡単なブラウザゲームを作っています。
以下のようなコードを書いているのですが、エラーが解決せず途中で作業が止まってしまいました。
チェス盤のようなマス目が5×5で並ぶように書いているつもりなのですが、そこで36行目
(class Board extends React.Component { の行)にて以下のようなエラーメッセージが
表示されました。
よろしくお願い致します。
発生している問題・エラーメッセージ
SyntaxError: Unexpected token ,(36,1)
該当のソースコード
JavaScript
1import React, { Component } from 'react' 2import logo from './Ostle.png' 3import './App.css'; 4import { BrowserRouter, Route, Link } from 'react-router-dom' 5 6 7const Top = () => ( 8 <BrowserRouter> 9 <div className="App"> 10 <header className="App-header"> 11 <img src={logo} className="App-logo" alt="logo" /> 12 13 <p> 14 オス、オトス、トル。 15 </p> 16 17 <Link to = '/game'>Game Start</Link> 18 19 <Route path = '/game' Component = {Game} /> 20 21 </header> 22 </div> 23 </BrowserRouter> 24) 25 26const Game = () =>( 27 28function Square(props) { 29 return ( 30 <buttun className= "square" onClick={props.onclick}> 31 {props.value} 32 </buttun> 33 ) 34} 35 36class Board extends React.Component { 37 renderSquare(i) { 38 return ( 39 <Square 40 value={this.props.squares[i]} 41 onClick={() => this.props.onClick(i)} 42 /> 43 ) 44 } 45 render() { 46 return ( 47 <div className="Game-board"> 48 <div className="board-row"> 49 {this.renderSquare(0)} 50 {this.renderSquare(1)} 51 {this.renderSquare(2)} 52 {this.renderSquare(3)} 53 {this.renderSquare(4)} 54 </div> 55 <div className="board-row"> 56 {this.renderSquare(5)} 57 {this.renderSquare(6)} 58 {this.renderSquare(7)} 59 {this.renderSquare(8)} 60 {this.renderSquare(9)} 61 </div> 62 <div className="board-row"> 63 {this.renderSquare(10)} 64 {this.renderSquare(11)} 65 {this.renderSquare(12)} 66 {this.renderSquare(13)} 67 {this.renderSquare(14)} 68 </div> 69 <div className="board-row"> 70 {this.renderSquare(15)} 71 {this.renderSquare(16)} 72 {this.renderSquare(17)} 73 {this.renderSquare(18)} 74 {this.renderSquare(19)} 75 </div> 76 <div className="board-row"> 77 {this.renderSquare(20)} 78 {this.renderSquare(21)} 79 {this.renderSquare(22)} 80 {this.renderSquare(23)} 81 {this.renderSquare(24)} 82 </div> 83 </div> 84 ) 85 } 86} 87) 88 89 90export default Top;
試したこと
括弧の数や種類があってないという凡ミスかと思いましたが
確認してみたところそれらは問題ありませんでした。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/12/07 01:08