javascript - React children is a function: How to define TypeScript type correctly? - Stack Overflow

admin管理员组

文章数量:1314843

I have a small React Component where the child is a function. I can't seem to figure out how to define the children prop in TypeScript.

class ClickOutside extends React.PureComponent<Props, {}> {
  render() {
    const { children } = this.props;

    return children({ setElementRef: this.setElementRef });
  }
}

I'm calling it this way:

<ClickOutside onOutsideClick={() => this.setState({ isOpen: false })}>
  {({ setElementRef }) => (
    <div ref={setElementRef}>
      {trigger}
      {children}
    </div>
  )}
</ClickOutside>

And this is what I tried to define the prop but it does not work at all. I have tried several other things but failed and I'm kinda lost here.

type Props = {
  children: ({ setElementRef: (el: HTMLElement) => any }) => React.ReactNode,
  onOutsideClick: Function,
}

EDIT:

This produces ';' expected. on =>

When I change the type definition this way:

type Props = {
  children: ({ setElementRef: (el: HTMLElement) => any }),
  onOutsideClick: Function,
}

It produces this error:

Cannot invoke an expression whose type lacks a call signature. Type '{ setElementRef: (el: HTMLElement) => any; } | ({ setElementRef: (el: HTMLElement) => any; } & string) | ({ setElementRef: (el: HTMLElement) => any; } & number) | ({ setElementRef: (el: HTMLElement) => any; } & false) | ({ ...; } & true) | ({ ...; } & ReactElement<...>) | ({ ...; } & ReactNodeArray) | ({ ...; } & Re...' has no patible call signatures.

I have a small React Component where the child is a function. I can't seem to figure out how to define the children prop in TypeScript.

class ClickOutside extends React.PureComponent<Props, {}> {
  render() {
    const { children } = this.props;

    return children({ setElementRef: this.setElementRef });
  }
}

I'm calling it this way:

<ClickOutside onOutsideClick={() => this.setState({ isOpen: false })}>
  {({ setElementRef }) => (
    <div ref={setElementRef}>
      {trigger}
      {children}
    </div>
  )}
</ClickOutside>

And this is what I tried to define the prop but it does not work at all. I have tried several other things but failed and I'm kinda lost here.

type Props = {
  children: ({ setElementRef: (el: HTMLElement) => any }) => React.ReactNode,
  onOutsideClick: Function,
}

EDIT:

This produces ';' expected. on =>

When I change the type definition this way:

type Props = {
  children: ({ setElementRef: (el: HTMLElement) => any }),
  onOutsideClick: Function,
}

It produces this error:

Cannot invoke an expression whose type lacks a call signature. Type '{ setElementRef: (el: HTMLElement) => any; } | ({ setElementRef: (el: HTMLElement) => any; } & string) | ({ setElementRef: (el: HTMLElement) => any; } & number) | ({ setElementRef: (el: HTMLElement) => any; } & false) | ({ ...; } & true) | ({ ...; } & ReactElement<...>) | ({ ...; } & ReactNodeArray) | ({ ...; } & Re...' has no patible call signatures.

• javascript
• reactjs
• typescript

Share Improve this question Follow edited May 16, 2019 at 15:03 mxmtsk asked May 15, 2019 at 15:44 mxmtskmxmtsk 4,68566 gold badges2626 silver badges4848 bronze badges 5

• What error you're getting in pilation? – Shridhar Sharma Commented May 15, 2019 at 15:54
• Are you returning an array of ReactNodes maybe? I'd need to look at the ts error – Fernando Salas Commented May 15, 2019 at 16:38
• @ShridharSharma I've edited my post - sorry – mxmtsk Commented May 16, 2019 at 15:03
• @FerSalas I've edited my post - sorry – mxmtsk Commented May 16, 2019 at 15:03
• try to change React.PureComponent to React.Component – Shridhar Sharma Commented May 17, 2019 at 9:56

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

You need to define the type of setElementRef in the de-structured object parameter of the children prop:

type Props = {
 children(options: { setElementRef(el: HTMLElement): any } ): React.ReactNode;
};

Remember that when de-structuring an object, the : symbol performs its JavaScript duties and reassigns a property name, whereas in this example you're expecting it to designate a type.

本文标签： javascriptReact children is a function How to define TypeScript type correctlyStack Overflow