反应：将组件作为道具传递并将其与其他道具一起使用[重复]答案

【问题标题】：React: pass Component as prop and use it with additional props [duplicate]反应：将组件作为道具传递并将其与其他道具一起使用[重复]
【发布时间】：2020-04-04 09:24:56
【问题描述】：

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

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

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

我想将它与其他类似的组件一起使用

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

有什么办法吗？

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

【问题讨论】：

你可以试试HOC组件。
看看this answer和this answer
@ManirajSS with HOC 我不能使用 useRef 或 useState 因为该函数不是组件（AFAIU）所以我想我不能使用它 |||我想在这里避免任何与类相关的 React
@NickParsons 谢谢 :) 第一个答案不允许我向组件添加更多道具，所以如果这是真的我不能使用它，第二个答案使用我不使用的 cloneElement '不像这里，它必须是一个更简单的解决方案
我知道 HOC 可以做到这一点，正如您的问题 stackoverflow.com/a/31757397/826815 的回答中所说，所以我会回答是的，感谢您告诉我！

标签： javascript reactjs react-props react-component

【解决方案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 元素。

【讨论】：

“传入”是指小时候？ *我试图避免使用 cloneElement 并改为查看 HOC/如果这是一个选项
*最后我/我已经将不同组件的冗余逻辑提取到自定义 useHook 中，因此现在我不需要更改组件（因此使用 cloneElement）