reactjs - Kalle en funksjon etter navnet sitt (streng) i React.Component ved å bruke TypeScript

Jeg skriver en React-app med TypeScript. Komponentens tilstand ser slik ut:

type UploadState = {
  ...
  modal: string | null
  ...
}

I min render har jeg:

render() {
  return <div>{this.renderModal()}</div>
}

et sted i koden har jeg:

this.setState({ modal: 'mappingModal' })

og til slutt er renderModel:

renderModal = () => {
  if (this.state.modal === null) {
    return
  }
  return this[modal as keyof this]() //It doesn't work
}

JEG FORVENTER å få returverdien av mappingModal:

mappingModal = () => {
  return <h1>Some text or whatever!</h1>
}

Men jeg får denne feilen på grunn av () i this[modal as keyof this]() :

Cannot invoke an expression whose type lacks a call signature.
Type '{}' has no compatible call signatures.ts(2349)

Og hvis jeg fjerner (), får jeg denne feilen i nettleseren:

Warning: Functions are not valid as a React child.
This may happen if you return a Component instead of <Component /> from render.
Or maybe you meant to call this function rather than return it.

Noen løsning?

OPPDATERING (POTENSIELT SVAR)

Det ser ut til at hvis jeg bruker this[modal as keyof Upload]() - og Upload er selvfølgelig navnet på komponenten min - vil jeg ikke ha noen problemer. Forhåpentligvis vil det ikke forårsake noen fremtidige feil

Svar #1

Det ser ut til at hvis jeg bruker this[modal as keyof Upload]() - og Upload er navnet på komponenten min selvfølgelig - vil jeg ikke ha noen problemer. Slik:

class Upload extends React.Component<UploadProps, UploadState> {
  ...
  renderModal = () => {
    if (this.state.modal === null) {
      return
    }
    return this[modal as keyof Upload]()
  }
  ...
}