javascript - Typescript: TypeError är odefinierad

Jag är ganska ny inom Typescript och React. Jag har försökt att implementera react-rewards npm-biblioteket och jag har löst allt förutom ett problem.

type Props = {}

class Surprisebutton extends Component<Props>{
    reward: any;

    render() {
        return (
            <Reward 
            ref={(ref) => { this.reward = ref }}
            type='memphis'>
                <Button onClick={this.reward.rewardMe()} style={styles.button} variant="contained" color="primary">
                    Surprise!
              <FavoriteIcon style={{ marginLeft: 10 }} />
                </Button>
            </Reward>
        )
    }
}

Efter att ha kört npm start får jag ett felmeddelande som säger TypeError: this.reward är odefinierad. Vad är det bästa sättet att lösa det?

Svar #1

Det har inget att göra med TypeScript. TS är bara en kompilator och linter och du får ett körfel. Det är denna rad:

this.reward.rewardMe()

ref tilldelas efter att komponenten har monterats helt och rewardMe() försöker anropa den omedelbart. Detta är också ett sekundärt misstag. Du vill inte använda ()-anropet annars kommer funktionen att köras omedelbart (och aldrig sluta).

Linjen bör vara

<Button onClick={this.reward.rewardMe} style={styles.button} variant="contained" color="primary">

Svar #2

Jag kan ha fel eftersom jag aldrig har använt detta paket, men enligt dokumentationen/användningsemnet. De initierar inte reward-variabeln. Försök ta bort det, här är den fixade versionen

type Props = {}

class Surprisebutton extends Component<Props>{

render() {
    return (
        <Reward 
        ref={(ref) => { this.reward = ref }}
        type='memphis'>
            <Button onClick={this.reward.rewardMe()} style={styles.button} variant="contained" color="primary">
                Surprise!
          <FavoriteIcon style={{ marginLeft: 10 }} />
            </Button>
        </Reward>
    )
  }
}

Igen kan jag ha fel, men enligt GitHub-sidan tror jag att det är det enda jag kan dra slutsatsen av.