import './App.css';
  
 function Square({value}) {                                                                           
   function handleClick() {       
     // 使用 console.log() 在代码中输出调试信息，并在控制台中查看它们                                                                    
     console.log('clicked!');
   } 
   return <button className="square" onClick={handleClick}>{value}</button>;                          
 }   
     
 export default function Board() {                                                                    
   return (
     <>                                                                                               
       <div className="board-row">                                                                    
         <Square value="1" />
         <Square value="2" />
         <Square value="3" />
       </div> 
       <div className="board-row">                                                                    
         <Square value="4" />                                                                         
         <Square value="5" />                                                                         
         <Square value="6" />                                                                         
       </div>
       <div className="board-row">                                                                    
         <Square value="7" />                                                                         
         <Square value="8" />                                                                         
         <Square value="9" />                                                                         
       </div>
     </>
   );  
 }