Question

在React教程中，他们构建了一个tic-tac-toe游戏。在我得到这段代码之前很容易理解：

handleClick(i) {
        const squares = this.state.squares.slice();
        squares[i] = 'X';
        this.setState({squares : squares});
}

此代码是click事件的处理程序。但我没有得到代码中的'i'变量来自哪里。 React怎么知道我点击的确切按钮？任何阅读该教程的人都可以为我解释一下吗？

以下是完整代码（为了个人目的，我将onClick道具更改为onActivation）：

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';


class Square extends Component {
    render(){
        return (
            <button
                className="square"
                onClick={() => this.props.onActivation()}>
                {this.props.value}
            </button>
        );
    }
}
class Board extends Component {
    constructor(){
        super();
        this.state = {
            squares: Array(9).fill(null),
        }
    }
    handleClick(i) {
        const squares = this.state.squares.slice();
        squares[i] = 'X';
        this.setState({squares : squares});
    }
    renderSquare(i) {
        return (
            <Square
            value={this.state.squares[i]}
            onActivation={()=>this.handleClick(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>
            {this.renderSquare(3)}
            {this.renderSquare(4)}
            {this.renderSquare(5)}
            </div>
            <div>
            {this.renderSquare(6)}
            {this.renderSquare(7)}
            {this.renderSquare(8)}
            </div>
            </div>
            )
    }
}

class Game extends Component {
    render() {
        return (
            <div className="game">
            <div className="game-board">
            <Board/>
            </div>
            <div className="game-info">
        <div>{/* status */}</div>
    <ol>{/* TODO */}</ol>
    </div>
    </div>
    )
    }
}

ReactDOM.render(<Game/>, document.getElementById('root'));

Answer 1

按照变量和函数，直到找到源。

从i = anws[0]开始，该行位于函数squares[i] = 'X';内，其中handleClick()为参数。在i内调用handleClick()，该onActivation={()=>this.handleClick(i)}位于renderSquare()函数中，该函数再次以i作为参数。 renderSquare()在组件的render()方法中使用，其中renderSquare()的每次使用都通过数字参数传递。

例如，this.renderSquare(7)。在这种情况下，号码7会通过renderSquare传递到handleClick到squares[i]。

如果你是视觉类型

Answer 2

我发现＆＃39;我＆＃39;已被<item> <shape android:shape="rectangle"> <solid android:color="#5EB888"/> <corners android:radius="30dp"/> </shape> </item> <item android:bottom="-1000dp" android:right="200dp" android:gravity="right" android:top="190dp"> <rotate android:fromDegrees="-45"> <shape android:shape="rectangle"> <solid android:color="#000000"/> </shape> </rotate> </item>范围内悬挂，这就是renderSquare()

可以使用的原因

这个'我'来自哪里？

2 个答案: