在反应表中:根据数字显示彩色圆圈是可能的吗?

Question

你好，我不知道如何在右侧图片上获得结果。反应表能做到吗?如果是，怎么办?我有评论1,2,3,4的等级，而不是显示数字，我想填充不同颜色(关于值)的圆圈。

export default function MenuDisplay() {
const { menuId } = useParams();
const { match } = JsonData;
const [hideSelected, setHideSelected] = useState(false);
const [selected, setSelected] = useState({});
... 
const matchData = (
match.find((el) => el._id_menu === menuId)?._ids ?? []
).filter(({ _id }) => {
if (hideSelected) {
return !selected[_id];
}
return true;
});
const getRowProps = (row) => {
return {
style: {
backgroundColor: selected[row.values.id] ? "lightgrey" : "white"
}
};
};
const data = [

{
Header: "Comments",
accessor: (row) => row.comments
},
{
Header: "Dishes",
accessor: (row) => row.dishes,
id: "dishes",
Cell: ({ value }) => value && Object.values(value[0]).join(", ")
},
];
return (
<div>
<Table
data={matchData}
columns={data}
/>
</div>
);
}

Answer 1

定义一个计数器组件，它的计数值为&在一个伸缩容器div ....上生成$countdiv数子div可以在宽度，高度和边界半径上进行微调，以使其成为所需大小的圆。背景色设置得当。

我分叉了你的沙箱，并在这里为你做了一个示例实现

希望对你有帮助。