在 React 中生成随机相同的颜色

Question

我已经成功生成了随机颜色。问题是我还想为相同 orderNumber 的背景颜色分配相同的随机颜色。我该怎么做？

请检查我的codesandbox 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);
};

Answer 1

您的沙盒中的代码未跟踪：

之前生成的颜色
已指定颜色的订单号。

您可以使用地图对象来跟踪两者，这允许 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>

使用 PolishedJS readableColor 实用程序 select 要使用的可读文本颜色。

在 React 中生成随机相同的颜色

Generate Random Same Colors in React

ecmascript-6

reactjs

material-ui

react-hooks