在另一个组件中访问组件的引用？答案

【问题标题】：Access ref of component in another component?在另一个组件中访问组件的引用？
【发布时间】：2021-04-04 17:48:24
【问题描述】：

在我的组件Box 中，我返回一个mesh，它的类型为Object3d，我需要在我的Floor 组件中获取对这个对象的引用，但我还没有想出一个方法来做到这一点.我试图在我的App 组件中分配另一个引用并将其传递给Floor，但这样我只能得到{current: undefined}。

如何在另一个组件中引用Box 的mesh ref？

我是这样尝试的

export default function App() {

  const box = useRef();

  return (
    <Canvas camera={{ position: [0, 10, 10] }} onCreated={({ scene }) => {
      scene.background = new THREE.Color(0xffffff);
      scene.fog = new THREE.Fog(0xffffff, 0, 750);
    }} >
      <hemisphereLight args={[0xeeeeff, 0x777788, 0.75]} position={[0.5, 1, 0.75]}></hemisphereLight>
      <Box ref={box} position={[0, 10, -30]} />
      <Floor boxRef={box}></Floor>
    </Canvas>
  )
}

function Floor({ boxRef }) {
  const mesh = useRef();

  useFrame(() => {
    // How to use the mesh ref of Box here?????
    console.log(boxRef);
  })

  return (
    <mesh ref={mesh} >
      <planeBufferGeometry args={[2000, 2000]} rotateX={-Math.PI / 2}></planeBufferGeometry>
      <meshStandardMaterial color="#999999"></meshStandardMaterial>
    </mesh>
  )
}

function Box(props) {
  const mesh = useRef()
  
  return (
    <mesh
      {...props}
      ref={mesh}>
      <boxBufferGeometry args={[20, 20, 20]} />
      <meshPhongMaterial color={0x00ff00}></meshPhongMaterial>
    </mesh>
  )
}

【问题讨论】：

标签： reactjs three.js react-three-fiber

【解决方案1】：

我猜你不应该覆盖 Box 组件中的 ref 而只使用 {...props}

export default function App() {

  const box = useRef();

  return (
    <Canvas camera={{ position: [0, 10, 10] }} onCreated={({ scene }) => {
      scene.background = new THREE.Color(0xffffff);
      scene.fog = new THREE.Fog(0xffffff, 0, 750);
    }} >
      <hemisphereLight args={[0xeeeeff, 0x777788, 0.75]} position={[0.5, 1, 0.75]}></hemisphereLight>
      <Box ref={box} position={[0, 10, -30]} />
      <Floor boxRef={box}></Floor>
    </Canvas>
  )
}

function Floor({ boxRef }) {
  const mesh = useRef();

  useFrame(() => {
    // How to use the mesh ref of Box here?????
    console.log(boxRef);
  })

  return (
    <mesh ref={mesh} >
      <planeBufferGeometry args={[2000, 2000]} rotateX={-Math.PI / 2}></planeBufferGeometry>
      <meshStandardMaterial color="#999999"></meshStandardMaterial>
    </mesh>
  )
}

function Box(props) {
  
  return (
    <mesh
      {...props}>
      <boxBufferGeometry args={[20, 20, 20]} />
      <meshPhongMaterial color={0x00ff00}></meshPhongMaterial>
    </mesh>
  )
}

【讨论】：

谢谢，这并没有完全解决问题，但它找到了正确的方向。我不得不为此使用React.forwardRef。

【解决方案2】：

解决方案涉及React.forwardRef，我就是这样解决的

export default function App() {

  const box = useRef();

  return (
    <Canvas camera={{ position: [0, 10, 10] }} onCreated={({ scene }) => {
      scene.background = new THREE.Color(0xffffff);
      scene.fog = new THREE.Fog(0xffffff, 0, 750);
    }} >
      <hemisphereLight args={[0xeeeeff, 0x777788, 0.75]} position={[0.5, 1, 0.75]}></hemisphereLight>
      <Box ref={box} position={[0, 10, -30]} />
      <Floor boxRef={box}></Floor>
    </Canvas>
  )
}

function Floor({ boxRef }) {
  const mesh = useRef();

  useFrame(() => {
    console.log(boxRef);
  })

  return (
    <mesh ref={mesh} >
      <planeBufferGeometry args={[2000, 2000]} rotateX={-Math.PI / 2}></planeBufferGeometry>
      <meshStandardMaterial color="#999999"></meshStandardMaterial>
    </mesh>
  )
}

const Box = React.forwardRef((props, ref) => {  
  return (
    <mesh
      {...props}
      ref={ref}>
      <boxBufferGeometry args={[20, 20, 20]} />
      <meshPhongMaterial color={0x00ff00}></meshPhongMaterial>
    </mesh>
  )
})

【讨论】：