我想将多个徽章组件作为道具传递给组件。
<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中传递组件可能是错误的方法。我有正确的方法吗?
答案 0 :(得分:0)
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
作为道具