反应：传递组件作为道具，并与额外的道具一起使用[重复]

Question

const Img = ({ component }) => {
  const image_ref = useRef()

  return (
  <>
    {component
      ref={image_ref}
    }
  </>
  )
}

const MyImg = () => <Img component={<MySpecificImg />} />
const MyBackImg = () => <Img component={<MySpecificBackImg />} />

有什么办法可以做到这一点吗？

需要能够更改组件调用的组件

Answer 1

如果将prop作为 传递，则传递的是JSX元素，可以在img组件中将其呈现为：

const Img = ({ element }) => {
  const image_ref = useRef()
  const elementWithRef = React.cloneElement(element, { ref: image_ref });
  return (
  <>
    {element}
  </>
  )
}

如果您要传入组件，您可以从示例中轻松地完成以下操作：

const Img = ({ component: Component }) => {
  const image_ref = useRef()
  return (
  <>
    <Component ref={image_ref} />
  </>
  )
}

请注意，ref在这两种情况下都附加到外部元素，如果这是一个组件实例，则必须使用forwardRef将其转发到内部DOM元素。