react学习笔记-从井字棋开始(2)

前言

接着前面的空格子棋 加上其他功能变成真正的井字棋

数字显示添加

传值 prop 方式

修改 Board 类的renderSquare函数

class Board extends React.Component {
   
  renderSquare(i) {
      
  return <Square value={
   i} />;  
  }
   }

value = {i} 就是传值方式

同样的修改 Square 的渲染函数 接收参数并且 显示出来

class Square extends React.Component {
   
  render() {
   
    return (
      <button className="square">        
      {
   this.props.value}
      </button>
    );
  }
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nGOqHDAQ-1617353498608)(en-resource://database/2034:1)]

给组件添加交互功能

Square 组件中 render() 方法的返回值中的 button 标签修改为如下内容：

class Square extends React.Component {
   
  render() {
   
    return (      
    <button className="square" onClick={
   function() {
    alert(