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:
Share Improve this question edited May 16, 2019 at 15:03 mxmtsk asked May 15, 2019 at 15:44 mxmtskmxmtsk 4,6856 gold badges26 silver badges48 bronze badges 5Cannot 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.
- 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
toReact.Component
– Shridhar Sharma Commented May 17, 2019 at 9:56
1 Answer
Reset to default 6You 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
版权声明:本文标题:javascript - React children is a function: How to define TypeScript type correctly? - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1741971743a2407881.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论