Reactjs 对属性如何工作的误解

我试图理解reactJS中的属性是如何工作的，并试图完成一个tic-tac-toe游戏来帮助我完成这个任务。下面是一段让我困惑的代码：

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

  render() {
    const status = 'Next player: X';

    return (
      <div>
        <div className="status">{status}</div>
        <div className="board-row">
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        </div>
        <div className="board-row">
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        </div>
        <div className="board-row">
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        </div>
      </div>
    );
  }
}

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

类板扩展React.Component
{
renderSquare（一）
{
返回；
}
render（）{
常量状态='下一个玩家：X'；
返回(
{状态}
{this.renderSquare（0）}
{this.renderSquare（1）}
{this.renderSquare（2）}
{this.renderSquare（3）}
{this.renderSquare（4）}
{this.renderSquare（5）}
{this.renderSquare（6）}
{this.renderSquare（7）}
{this.renderSquare（8）}
);
}
}
类Square扩展了React.Component
{
render（）{
返回(
{this.props.value}
);
}
}

---

我不明白的是：父组件board返回值为I的子组件square。那么Board如何将属性传递给子类square呢？我是一个彻头彻尾的noob，所以我可能在某个地方完全错误地理解了这一点。

此函数返回一个JSX表达式，其中包含一个方形组件，该组件接受一个名为value的属性，该属性的值为I

renderSquare(i) 
 {
   return <Square value={i} />;
 }

在这种情况下，在Square组件内部，在代码的某些部分中，可能在名为calculateArea的函数内部，甚至在相同的渲染方法中，使用名为value的属性，如下所示：

const { nameOfTheProp } = this.props;

   render() {
     const { value } = this.props;
      return (
      <canvas
        id="mySquare"
        width={value * 50}
        height={value * 50}
        style={{ border: "1px solid #d3d3d3" }}
      >
        Your browser does not support the HTML5 canvas tag.
      </canvas>
    );
   }

render（）{
const{value}=this.props；
返回(
您的浏览器不支持HTML5画布标记。
);
}

然后，如果您在板上使用渲染方法传递给renderSquare（i=1），则square将

---

接收它并渲染宽度和高度为1*50的画布。

它将在代码中显示

使用名为

value

的属性，将值

i

传递到生成方形组件的函数中。如果您想正确理解React，请访问React网站并学习他们的教程，这非常好，值得您花半个小时到一个小时来深入了解每件事情的工作原理。编码，你会很高兴你这么做的。不，不是。函数没有子组件。相反，该函数构建一个组件（而不是子组件，只是“组件”）。在这种情况下，

将Square的属性

值设置为某个值，并且该组件可以使用
this.props.propertyname
访问任何组件上的任何属性集。因此，因为您正在创建
，所以方形组件可以通过自己代码中的
this.props.value
访问
value
属性。你可以在Square的
render（）
函数的代码中看到它在做什么。@Mike'Pomax'Kamermans我的大脑没有正确地看待它。我想我现在明白了。return语句调用“render square”函数9次，以便为行中的每个正方形指定一个值，对吗。电路板的
渲染
最终生成九个
正方形
组件。当函数返回此值时，关键字“this”指的是什么。renderSquare（0）？这是指元件板还是元件正方形？我不知道如果直到函数本身被调用才创建square，那么它将如何引用square。我不知道的是props是如何从父组件传递到子组件的。例如，Square类如何与Board类建立连接？这个.props.value是如何工作的？没有要传递给值变量的函数。“this”关键字如何知道引用什么？请像下面这样思考。您有一个具有子节点（在父节点内渲染的子节点/组件）的父节点。因此，当Board在其渲染方法中渲染组件方形时，会建立连接，并且在该连接中创建道具，您可以通过手动发送，在这种情况下，也可以使用高阶组件，如connect from Redux with MapStateTops（）。