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

如果您以<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元素。

React：将Component作为prop传递，并与其他props一起使用

1 个答案: