Question

我有一个小的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 ...'没有兼容的呼叫签名。

Answer 1

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

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

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

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

1 个答案: