Как обнаружить щелчок за пределами функционального компонента React

Question

Я хочу обнаружить щелчок вне функционального компонента React .

Затем я нашел следующую статью и соответствующим образом реализовал код.

Обнаружение щелчка вне компонента React

Но мой код не работает.Я понимаю причину, но не знаю решения.

import React from 'react';
import Foo from 'foo'; // <- Functional component in the node_modules

export default class extends React.PureComponent {
  private readonly refRoot = React.createRef();
  public componentDidMount() {
    document.addEventListener('click', this.clickOutside);
  }
  public componentWillUnmount() {
    document.removeEventListener('click', this.clickOutside);
  }
  private clickOutside(ev: MouseEvent) {
    if (refRoot.current.contains(ev.target)) {
      console.log('clicked outside.');
    }
  }
  public render(){
    return (
      <Foo ref={this.refRoot}> // <- Doubt.
        ...
      </Foo>
    );
  }
}

Поскольку не может использовать атрибут ref для компонента функции .

Возможно, сможет решить его путем переносас элементом div, но я хочу больше не усложнять слой DOM при рендеринге в HTML.

Что у вас есть идеи?

Answer 1

Идея создать ссылку на элемент DOM, отображаемый внутри Foo, который вы можете сделать, передав его в качестве реквизита, который можно использовать в Foo

  <Foo innerRef={this.refRoot}> 
    ...
  </Foo>

Внутри Foo:

const Foo = (props) => {
   return <div ref={props.innerRef}>{/* data here */}</div>
}

или вы можете использовать React.forwardRef для пересылки ссылки Foos своим детям

const Foo = React.forwardRef(props, ref) => {
   return <div ref={ref}>{/* data here */}</div>
}

---

Родитель

public render(){
    return (
      <Foo ref={this.refRoot}> // <- Doubt.
        ...
      </Foo>
    );
  }

Answer 2

Если вы хотите использовать ref внутри функционального компонента, то вместо передачи его от родительского, вы можете использовать React hooks API. https://reactjs.org/docs/hooks-reference.html#useref

Пожалуйста, проверьте выше ^^