“this” undefined in exported react function

Question

Problem: When the exported function is called by my React component, console.log(this) displays undefined. I was expecting it to return the component since I have bound it in my constructor.

Leaderboard.js:

import React from 'react';
import {leaderboard, createLeaderboard} from '../utility/gamecode';

class Leaderboard extends React.Component{
  constructor(props){
    super(props);
    this.showLeaderboard = showLeaderboard.bind(this);
    this.state = {
    }
  };

  componentDidUpdate(){
    if(this.props.leaderboard){
      showLeaderboard();
    }
  }

  render(){
    return(
      <div className="leaderboard hidden">
      </div>
    )
  }

}

export default Leaderboard;

gamecode.js:

export function showLeaderboard(){
 console.log(this);
}
//-----------------------
export function createLeaderboard(props){
}

Answer 1

您呼叫showLeaderboard而不是this.showLeaderboard -您绑定的一个this来。