Reactjs 将组件作为道具传递给子组件

我想将多个徽章组件作为道具传递给一个组件

<MouseOverPopover
  data={
    row.original.region == null ? (
      "-"
    ) : !Array.isArray(row.original.region) ? (
      <Badge variant="info"> {row.original.region} </Badge>
    ) : (
      row.original.region.map((region) => (
        <Badge variant="info" style={{ margin: "2px" }} key={region}>
          {region}
        </Badge>
      ))
    )
  }
/>

然后我使用

{data}

来显示内容

但是，没有呈现徽章，我在日志中发现了这个错误

失败的道具类型：提供给ForwardRef（徽章）的值信息的道具变量无效。

我猜在道具内部传递组件可能是错误的方法。有没有正确的方法可以做到这一点？

第一点：它自己说的错误

失败的道具类型：提供给ForwardRef（徽章）的值信息的道具变量无效。

使用道具变量=“信息”的以下意思无效

<Badge variant="info"> {row.original.region} </Badge>
       ^^^ 

鼠标悬停组件：

export default MouseOverPopover = ({ children }) => {
   return (
     ...
     {children} //badge will render here
     ...
   )
}

您的代码也可以工作您使用了

您自己的约定（data={…}）

并且我使用了

子项作为道具
第一点：它自己说的错误
失败的道具类型：提供给ForwardRef（徽章）的值信息的道具变量无效。

使用道具变量=“信息”的以下意思无效

<Badge variant="info"> {row.original.region} </Badge>
       ^^^ 

鼠标悬停组件：

export default MouseOverPopover = ({ children }) => {
   return (
     ...
     {children} //badge will render here
     ...
   )
}

您的代码也可以工作。您使用了
您自己的约定（数据={…}）
并且我使用了
子项作为道具
最好传递“组件”，而不是作为JSX，即
徽章
与
，如果这有意义的话。组件是否仅通过了
标记
？似乎您可以在
mouseoverpover
中内部化此逻辑，并将
row.original.region
作为“数据”传递。我希望组件
mouseoverpover
用作一个通用组件，它不仅显示徽章。最好传递“组件”，而不是作为JSX传递，也就是说，
徽章
与
，如果有意义的话。组件是否仅通过了
标记
？似乎您可以在
mouseoverpover
中内部化此逻辑，只需将
row.original.region
作为“数据”传递。我希望组件
mouseoverpover
用作一个通用组件，而不仅仅显示徽章。