reactjs - Kræver et enkelt React-barnkomponent i TypeScript (TSX)

Hvis jeg har et interface, der overskriver og specificerer et enkelt barn, noget i stil med:

interface Props extends React.HTMLProps<HTMLDivElement> {
    children?: React.ReactElement<any>;
}

class MyComponent extends React.Component<Props, {}> {
    // ...
}

IntelliSense viser korrekt enkelt-element-barnets prop-type, men jeg kan bruge en komponent med disse props med flere børnekomponenter uden nogen fejl:

<MyComponent>
  <div>hello</div>
  <div>world</div>
</MyComponent>

Dette kompilerer fint med TypeScript 1.8.30.0, men ved køretid går det galt:

Invariant Violation: ReactDOM.render(): Invalid component element.

Det fungerer med kun ét <div/> underelement, da komponentkoden er skrevet til det scenarie. Det virker som en fejl for mig - jeg forventede, at det ville indse, at to <div/> elementer ikke matcher definitionen af children. Jeg tænkte, at jeg ville spørge her først, inden jeg opretter en issue, i tilfælde af at jeg misser noget.

Er det muligt kun at kræve et enkelt barn via this.props.children, eller skal jeg tilføje en specifik prop?

Svar #1

Dette virkede for mig:

export const Example = (props: { children: ReactElement }) => {
  return <div>{props.children}</div>
}

Svar #2

Du kan finde de relevante oplysninger nedenfor.

Enkeltbarn

At citere:

Med React.PropTypes.element kan du specificere, at kun et enkelt barn kan videregives til en komponent som children.

Det er muligt kun at håndhæve ét barn.

var MyComponent = React.createClass({
  propTypes: {
    children: React.PropTypes.element.isRequired
  },

  render: function() {
    return (
      <div>
        {this.props.children} // This must be exactly one element or it will warn.
      </div>
    );
  }
});

Relaterede artikler