问题描述
我已经成功地生成了随机颜色。问题是,我还想为相同orderNumber
的背景色指定相同的随机颜色。我该怎么做?
请检查我的代码和方框 CLICK HERE
const newColorFind = () => {
for (let x = 0; x < 6; x++) {
let index = Math.floor(Math.random() * 16);
let value = arrayOfColorFunctions[index];
randomColorString += value;
}
console.log(randomColorString);
};
推荐答案
沙箱中的代码没有跟踪:
以前生成的颜色 已分配颜色的订单号。您可以使用映射对象来跟踪这两者,这允许对其中任何一个进行O(1)
固定时间查找。
示例:
const colorMap = {};
const selectedColors = {};
const generateColor = () => {
let randomColorString = "#";
const arrayOfColorFunctions = "0123456789abcdef";
for (let x = 0; x < 6; x++) {
let index = Math.floor(Math.random() * 16);
let value = arrayOfColorFunctions[index];
randomColorString += value;
}
return randomColorString;
};
const newColorFind = id => {
// If already generated and assigned, return
if (colorMap[id]) return colorMap[id];
// Generate new random color
let newColor;
do {
newColor = generateColor();
} while(selectedColors[newColor]);
// Found a new random, unassigned color
colorMap[id] = newColor;
selectedColors[newColor] = true;
// Return next new color
return newColor;
}
将当前迭代的orderNumber
传递给颜色实用程序
<TableCell
component="th"
scope="row"
sx={{ backgroundColor: newColorFind(row.orderNumber) }}
>
{row.orderNumber}
</TableCell>
使用PolishedJSreadableColor
实用程序选择要使用的可读文本颜色。