React：将组件作为道具传递并与其他道具一起使用

Question

我有一个像这样的通用组件

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

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

我想将它与其他像这样的组件一起使用

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

有没有办法做到这一点？

需要的是能够改变<Img/>组件调用的组件

Answer 1

如果您将 prop 作为 传递<MySpecificBackImg />，那么您将传递一个 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 元素。