Question

我在render（）函数的代码中遇到错误，我返回的地方就是意外的token.Here是代码。

class  Game extends React.Component {
   constructor(props){
      super(props);
      this.size=3;
      this.board=this.initilaizefun(this.size);
      this.state={
         rows:this.size,
         columns:this.size,
         arr:this.board
      }
   }
    shuffle =(array)=>{

    }
   //now we fill values from o to 8 in board
   initilaizefun=(size)=>{

  }

   rendergrid=()=>{

 }

   render() {
     return (
     <div className="game">
      <h1>PUZZLE</h1>
     </div>
     );
   }
}
ReactDOM.render(<Game />, document.getElementById('root'));

Answer 1

您的renderGrid函数包含多个语法错误。在编写React代码时，您需要使用webpack或独立cdn配置babel

rendergrid功能就像

rendergrid = () => {
    let arr1 = Array(this.state.size);
    console.log(arr1);
    return arr1.map((val, index1) => {
      return <div className="board">
        {
          arr1.map((val, index2) => {
            let val2 = this.state.arr[index1][index2].value;
            return <button className="button" >{val2}</button>;
          })
        }
      </div>
    })
  }

working codesandbox

如果您不想使用webpack，可以使用cdn like

<div id="root"></div>

<script src="build/react.min.js"></script>
<script src="build/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>
<script src="app.jsx" type="text/babel"></script>

React：错误：意外令牌

1 个答案: