React孩子是一个函数:如何正确定义TypeScript类型?

时间:2019-05-15 15:44:45

标签: javascript reactjs typescript

我有一个小的React Component,其中子元素是一个函数。我似乎无法弄清楚如何在TypeScript中定义children道具。

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

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

我这样称呼它:

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

这就是我尝试定义的道具,但是它根本不起作用。我尝试了其他几件事,但失败了,在这里我有点迷失了。

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

编辑:

这会在';' expected.上产生=>

当我以这种方式更改类型定义时:

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

它会产生此错误:

  

无法调用类型缺少调用签名的表达式。输入'{setElementRef:(el:HTMLElement)=> any; } | ({setElementRef:(el:HTMLElement)=> any;}&string)| ({setElementRef:(el:HTMLElement)=>任何;}和数字)| ({setElementRef:(el:HTMLElement)=> any;}&false)| ({...;}&true)| ({...;}&ReactElement <...>)| ({...;}&ReactNodeArray)| ({...;}&Re ...'没有兼容的呼叫签名。

1 个答案:

答案 0 :(得分:0)

您需要在setElementRef道具的解构对象参数中定义children的类型:

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

请记住,在解构对象时,:符号将执行其JavaScript职责并重新分配属性名称,而在此示例中,您期望它指定类型。