reactjs - Hvordan er en boolean en gyldig React.ReactNode-verdi?

Hvordan er en boolean-verdi (true eller false) ikke en ugyldig verdi for en prop av typen React.ReactNode, noe som resulterer i at følgende blir en Typescript-feil?

interface IProps {
    node: React.ReactNode;
}

const foo: IProps = {
    node: false,
};

Svar #1

ReactNode representerer alle mulige verdier som kan settes som et barn av et element. Booleans er tillatt fordi følgende er et veldig vanlig mønster for å gjøre betinget rendering:

const condition: boolean = Math.random() > 0.5;

<div>
  {condition && (
    <p>You win!</p>
  )}
</div>

Hvis condition er false, vil div's children-prop være false, og derfor er typen satt opp for å tillate dette.

Hvis du bare vil tillate elementer, vurder å bruke React.ReactElement i stedet:

interface IProps {
   node: React.ReactElement;
}

const foo: IProps = {
  node: <div /> // Good
}

const foo2: IProps = {
  node: null // Error. If you want to allow null, change to React.ReactElement | null
}

const foo3: IProps = {
  node: false // Error
}

Relaterte artikler