React hooks: ссылка на родителя компонента

Question

Я создаю пользовательский курсор мыши для каждого компонента (например, пользовательский курсор мыши на элементе фигуры).Я пишу пользовательский крючок для этого.Пока это ловушка:

const useMouseCoords = () => {
  let [coords, setCoords] = useState({ x: 0, y: 0 })

  // I need to calculate the coordinates from the parents offset. Here is where I'm stuck. 
  let offsetParent = parentRef.current.getBoundingClientRect()

  function handleCoords(e) {
    setCoords({
      x: e.clientX - offsetParent.x,
      y: e.clientY - offsetParent.y,
    })
  }

  useEffect(() => {
    if (typeof window === `undefined`) return // escape gatsby build process

    window.addEventListener('mousemove', handleCoords)

    return () => {
      window.removeEventListener('mousemove', handleCoords)
    }
  }, [])

  return coords
}

Компонент курсора мыши довольно прост:

const MouseCursor = (props) => {
  let { x, y } = useMouseCoords()

  return (
    <div
      className="mouse-cursor-button"
      style={{
        transform: `translate(${x}px, ${y}px)`,
      }}
    >
      <div className="mouse-cursor-button__text">Click to play</div>
    </div>
  )
}

Код, конечно, не работает, но скорее для иллюстрации того, что я пытаюсьдостижения.

Поэтому мне нужен родительский компонент компонента MouseCursor для вычисления смещения.Я застрял в той части, где я хочу сослаться на родительский компонент.Я надеялся, что смогу передать это в качестве аргумента на крючок.

Итак, вопрос в том, как я могу получить доступ к родительскому компоненту в хуке?

Answer 1

Разве вы не можете просто передать ссылку, как:

function Parent() {
  const ref = useRef()
  return <div ref={ref}><MouseCursor parentRef={ref} /></div>
}

const MouseCursor = (props) => {
  let { x, y } = useMouseCoords(props.parentRef)

  return (
    <div
      className="mouse-cursor-button"
      style={{
        transform: `translate(${x}px, ${y}px)`,
      }}
    >
      <div className="mouse-cursor-button__text">Click to play</div>
    </div>
  )
}

См. https://codesandbox.io/s/0y46034oyl?fontsize=14 например

Answer 2

В родительском компоненте может быть функция, которая взаимодействует с его состоянием, а затем использует свое состояние в подпорках дочерних элементов.

class Parent extends Component{
  constructor(props){
    super(props);
    this.state = {
       x: 0,
       y:0
    };
}
//...
function setCoords(x, y){
  this.setState({
    x: x,
    y: y
  })
}
//...
render(){
  return(
    <Child 
      actions={ {setParentCoords: this.setCoords.bind(this)} }
      x={ this.state.x } 
      y={ this.state.y }
  )
}

Теперь у вашего ребенка есть доступ к props.actions.setParentCoords()