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

Question

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

<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>
      ))
    )
  }
/>

这是MouseOverPopover组件

export default function MouseOverPopover({ data }) {

然后我使用{ data }来显示内容。

但是，徽章没有渲染，并且我在日志中得到了这个错误

Failed prop type: Invalid prop variant of value info supplied to ForwardRef(Badge)

我猜想在props中传递组件可能是错误的方法。我有正确的方法吗？

Answer 1

第一点：自我说明存在错误

Failed prop type: Invalid prop variant of value info supplied to ForwardRef(Badge)

在Badge以下且道具为 变体 =“ 信息 ”的意思无效。

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

徽章'dot'| 'standard'支票here仅有两种变体

第二点：传递道具的不同方式

这里React official site组成与继承

Containment是将道具Badges/any other components传递到MouseOverPopover (as it represent generic “boxes”)组件的一种方式；

根据我的看法，这样做

const getBadges = () => {
    if (row.original.region == null) {
      return "-";
    } else if (!Array.isArray(row.original.region)) {
      return <Badge variant="standard">{row.original.region}</Badge>;
    } else {
      return row.original.region.map((region) => (
        <Badge variant="standard" style={{ margin: "2px" }} key={region}>
          {region}
        </Badge>
      ));
    }
  };
  <MouseOverPopover>{getBadges()}</MouseOverPopover>;

MouseOverPopover组件：

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

您的代码也可以使用your own convention (data={...})，而我使用children作为道具