在React中傳遞函數作為props時無法綁定'this'

Question

My Letter組件需要多次重用，並且對其構造函數的更改要稍作更改。 我的想法是將函數作為prop傳遞給Letter ，因此我可以在構造函數中調用它。 但是，我有一個問題this 。

在下面的代碼中，當我調用this.props.setMessage.call(this) ， this是指Container而不是Letter ，因此Letter的狀態保持不變。 我可以看到， this是指Container通過插入console.log(this)在主體setMessage在功能Container 。

如何綁定this ，以便在運行此代碼時Letter的狀態發生變化？

資源：

export class Container extends React.component {

    ...

    setMessage = () => {
        this.state.message = 'hello';
    }

    render () {
        return (
            <div>
                <Letter setMessage={this.setMessage} />
            </div>  
    }
}

export class Letter extends React.component {
    constructor (props) {
        super(props);
        this.props.setMessage.call(this); // doesn't work, 'this' should refer to Letter but refers to Container
    }

    render () {
        ...
    }
}

Answer 1

那是因為您使用的是箭頭功能。

箭頭函數立即且永久地綁定到詞法上下文。 或者簡單地說在這種情況下， this將永遠是一個集裝箱。

要解決此問題，只需將其定義為常規函數即可。

export class Container extends React.Component {
  ...
  setMessage() {
    // As Mayank Shukla pointed out, this is how you should change state
    this.setState({ message: 'hello' });
  }
  ...
}

通常， setState是更新狀態的正確方法。 但是，如果嘗試在構造函數中立即使用setState ， 則會收到錯誤消息。

所以只要知道，如果要在構造函數之外的任何地方設置該狀態，則setState是正確的方法。 在構造函數中，您應該像以前一樣直接分配初始狀態。

Answer 2

嘗試

export class Container extends React.component {

    ...

    setMessage() {
        this.setState({
            message: 'hello'
        });
    }

    render () {
        return (
            <div>
                <Letter setMessage={this.setMessage} />
            </div>  
    }
}

export class Letter extends React.component {
    constructor (props) {
        super(props);
    }

    setMessage() {
        this.props.setMessage();
    }

    render () {
        ...
    }
}

在箭頭函數中使用“ this”時，它會綁定到立即作用域。此外，與this.state相比，更喜歡使用this.setState。 = ...