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
}

mousecursor组件非常简单：

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

您不能像下面那样将ref传递下去吗？

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()

React钩子：引用组件的父级

2 个答案: