Quiero asignar un color a un elemento de etiqueta con una identificación única. El color debe seleccionarse de una lista y, después de recargar o actualizar el componente, el color de la etiqueta no debe cambiar. Generé un color aleatorio por ID de etiqueta con el siguiente enfoque, pero no pude encontrar una manera de seleccionar los colores de una lista específica.
function hashCode(str) { //String#hashCode var hash = 0 for (var i = 0; i < str.length; i++) { hash = str.charCodeAt(i) + ((hash << 5) - hash) } console.log(hash) return hash } function intToRGB(i) { var c = (i & 0x00ffffff).toString(16).toUpperCase() return '00000'.substring(0, 6 - c.length) + c } export const colorGenerator = key => intToRGB(hashCode(key)) ? `#${intToRGB(hashCode(key))}` : '#774FFF'después de recargar o actualizar el componente, el color de la etiqueta no debería cambiar
Puede guardar el color como par de valores clave en el almacenamiento de la sesión del navegador: el almacenamiento de la sesión solo dura mientras la pestaña esté abierta, por lo que si sus funciones verifican y encuentran un color existente en el almacenamiento de la sesión, lo usa en lugar de uno aleatorio. https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage
No pude encontrar una manera de seleccionar los colores de una lista específica.
Defina una matriz que contenga todos los colores de su lista. Use la longitud de la matriz como módulo en su número aleatorio. Esto le da un índice de matriz aleatoria. colorList[randomIndex] le dará un color aleatorio de su lista.