reactjs - Begränsa tillåtna barn i React TypeScript

Att använda TypeScript i ett React-projekt, finns det något sätt att införa vissa begränsningar på de tillåtna barnen av en komponent? Kompileringstid är att föredra, men körtid kan fortfarande vara användbar.

I mitt fall har jag en komponent, kalla den <ClickTracker>, och den förväntar sig ett enda barn med en callback-prop onClick och den lägger till extra funktionalitet till callbacken (spårar klicket i ett externt bibliotek).

Detta fungerar utmärkt så länge barnet inuti en <ClickTracker> faktiskt använder en onClick-egenskap (alla HTML-element implementerar detta, till exempel), men misslyckas tyst annars.

Till exempel fungerar detta:

<ClickTracker>
  <div>Hello</div>
</ClickTracker>

Men detta fungerar inte:

class Hello extends Component<{}, {}> {
  render() {
    return <div>Hello</div>
  } 
}

<ClickTracker>
  <Hello />
</ClickTracker>

Men detta fungerar eftersom det skickar vidare onClick till ett HTML-element:

class Hello extends Component<{onClick: MouseEventHandler}, {}> {
  render() {
    return <div onClick={this.props.onClick}>Hello</div>
  } 
}

<ClickTracker>
  <Hello />
</ClickTracker>

Som du kan se skulle jag vilja ha viss säkerhet kring vad som kan gå in i <ClickTracker> baserat på barnens egenskaper. Eller om det finns ett annat sätt detta kan göras på.

Svar #1

Det finns för närvarande inget möjligt sätt att upprätthålla typningen av children med TypeScript.

Det finns mer information i detta nummer.

Svar #2

Eller om det finns ett annat sätt att göra detta på

Klickhändelser bubblar upp om inte någon komponent stoppade spridningen (inte standardbeteendet för inbyggda komponenter). Så du kan:

<div onClick={()=>alert('still noted')}>
  <Hello />
</div>

Och den diven är din ClickTracker 🌹