react-2-井字游戏-未完成

最新推荐文章于 2025-12-26 08:34:32 发布

原创最新推荐文章于 2025-12-26 08:34:32 发布 · 121 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #游戏 #javascript

react 专栏收录该内容

23 篇文章

订阅专栏

该文章展示了如何使用React进行组件化开发，创建了一个表格应用。它包括三个主要组件：Col、Row和Table。Col组件用于显示单元格内容并处理点击事件更新状态，Row组件接收值并拆分为多个Col，Table组件则包含多行数据。CSS样式定义了表格和单元格的布局和外观。

在这里插入图片描述

在这里插入图片描述
index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

class Col extends React.Component {
  //构造函数
  constructor(props) {
    //每一个构造函数都应该调用super
    super(props);
    
    this.state = {
      value: null
    }
  }
  render() {
    return (
      //()=> 箭头函数  function(){}
      <div className='col' onClick={() => this.setState({value:'x'})}>
        {this.state.value}
      </div>
    );
  }
}

class Row extends React.Component {
  render() {
    let colsArr = this.props.value.split(',');
    return (
      <div className='row'>
        <Col value={colsArr[0]} />
        <Col value={colsArr[1]} />
        <Col value={colsArr[2]} />
      </div>
    );
  }
}

class Table extends React.Component {
  render() {
    return (
      <div className='table'>
        <Row value={'1,2,3'} />
        <Row value={'4,5,6'} />
        <Row value={'7,8,9'} />
      </div>
    );
  }
}


root.render(<Table />);

index.css

.table{
  width: 304px;
  height:300px;
  border:1px solid #ccc;
}

.col{
  width: 100px;
  height:100px;
  border: 1px solid #ccc;
  float: left;
  font-weight: bold;
  font-size: 30px;
  text-align: center;
  line-height: 100px;
}

.row{
  height: 100px;
}