在Reaction中生成随机相同的颜色 [英] Generate Random Same Colors in React

问题描述

我已经成功地生成了随机颜色。问题是，我还想为相同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);
};

推荐答案

沙箱中的代码没有跟踪：

1. 以前生成的颜色
2. 已分配颜色的订单号。

您可以使用映射对象来跟踪这两者，这允许对其中任何一个进行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实用程序选择要使用的可读文本颜色。

这篇关于在Reaction中生成随机相同的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！