props中函数this指向问题

最新推荐文章于 2025-03-14 22:16:11 发布

原创最新推荐文章于 2025-03-14 22:16:11 发布 · 671 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

本文讨论了在React组件中，父组件Game通过props向子组件Board传递方法时遇到的this指向问题。当直接传递handleClick方法时，运行时this不再指向Game，而是指向调用它的Board。为了解决这个问题，文章建议使用箭头函数包装Game的handleClick方法，确保this保持指向Game，从而正确访问到Game的状态。这样可以避免类型错误并确保事件处理的正确执行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

假设有两个组件Game和Board,Game是Board的父组件，在Board中定义props其中一个属性为onClick，类型为（i : number）=> void

///Board组件
interface BoardProps {
    onClick: (i:number) => void
}

class Board extends React.Component<BoardProps,any> {

  render() {
    return (
        <>
          <div className="board-row" onClick ={ () => this.props.onClick(0) }></div>
          <div className="board-row" onClick ={ () => this.props.onClick(1) ></div>
          <div className="board-row" onClick ={ () => this.props.onClick(2) ></div>
        </>
    );
  }
}

然后在Game中定义handleClick方法通过Board的onClick传递给Borard，意图在Border中触发onClick时运行Game中的handleClick方法，希望handleClick中的this指向Game

///Gram组件
interface GameState {
    ///历史记录
    history: String,
}
class Game extends React.Component<void,GameState> {
    constructor(props : void) {
        super(props);
        this.state = {
            history: '',
        }
    }

    handleClick(i: number) : void{
        const history = this.state.history;
    }


    render() {
        const history= this.state.history;

        return (
            <Board onClick={this.handleClick}/>
        );
    }
}

此代码在编译过程中并不会出现类型错误，但当我们在运行代码后，触发Board组件的onClick回调时，却会出现报错，报错提示在handleClick中this.state上并没有找到history属性，此时可见handleClick中的this已经改变指向，不再指向Game而是指向Broad，与期望不符。

要使this指向不发生改变，则不能把Game中的定义方法直接传递给Broad，而是传递一个匿名函数，此函数会触发Game中的handleClick，此时this会指向Game而达到期望的效果。

<Board onClick={(i:number) => this.handleClick(i) }/>