Reactjs 使用react/typescript将onclick事件传递给继承的类

我正在使用Typescript学习Facebook react教程。然而，这是我第一次使用react和typescript。我想将onClick事件传递给“Square”类，该类使用typescript实现一个state和props接口

如何使这个Square类能够接受我的onClick事件并按预期触发它？正在与语法斗争

import * as React from 'react';

interface MyProps {
    value?: string;
}

interface MyState {
    value?: string;
    squares?: any[];
}

class Square extends React.Component<MyProps, MyState> {
    constructor() {
        super();
        this.state = {
            value: null,
            squares: [null]
        };
    }
    render() {
        return (
            <button className="square" onClick={() => this.setState({ value: 'X' })}>
                {this.state.value}
            </button>
        );
    }
}

class Board extends React.Component<MyProps, MyState> {
    constructor() {
        super();
        this.state = {
            squares: Array(9).fill(null),
        };
    }
    renderSquare(i) {
        return <Square value={this.state.squares[i]} onClick={() => 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 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 Game extends React.Component<MyProps, MyState> {
    render() {
        return (
            <div className="game">
                <div className="game-board">
                    <Board />
                </div>
                <div className="game-info">
                    <div>{/* status */}</div>
                    <ol>{/* TODO */}</ol>
                </div>
            </div>
        );
    }
}

// ========================================

export class ReactTut extends React.Component<any, void> {
    public render() {
        return <Game />
        ;
    }
}

import*as React from'React'；
接口MyProps{
值？：字符串；
}
接口MyState{
值？：字符串；
正方形？：任何[]；
}
类Square扩展了React.Component{
构造函数（）{
超级（）；
此.state={
值：null，
正方形：[空]
};
}
render（）{
返回(
this.setState（{value:'X'}）}>
{this.state.value}
);
}
}
类板扩展React.Component{
构造函数（）{
超级（）；
此.state={
正方形：数组（9）。填充（空），
};
}
renderSquare（一）{
返回这个.handleClick（i）}/>；
}
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）}
);
}
}
类游戏扩展了React.Component{
render（）{
返回(
{/*状态*/}
{/*TODO*/}
);
}
}
// ========================================
导出类reactut扩展React.Component{
公共渲染（）{
返回
;
}
}

最简单的方法就是将“onClick”属性设置为类型安全，如下所示：

接口MyProps{
值？：字符串，
onClick？
}

我正在学习一个关于tic-tac-toe的类似教程，以下是我的解决方案供您参考：

onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;

onClick:（事件：React.MouseEvent）=>void；

---

祝你好运：-）

我需要向MyProps界面添加一个可选函数<代码>接口MyProps{value？：字符串；onClick？（）：void；}