Javascript 如何在react中选择随机边框颜色？

我想在这个问题上得到一些帮助。我在玩react，试图为我打印的每个角色挑选一个随机的边框颜色

代码如下：

常量样式={ 填充：“16px”， 保证金：“12px”， 边框：'***我想在这里插入随机颜色***' textAlign:'中心'， 显示：“内联块”， 过渡：“0.2秒进入”， } 关于什么是最好的清洁方式有什么建议吗？

可以从中获得边框样式

然后创建一个函数，该函数获取一个介于0和数组中边框样式数之间的随机数，该数字将是使用style对象中的字符串模板传递给边框类型数组的索引

const borderStyles=[无、虚线、虚线、实心、双精度、凹槽]； 函数getIndex{ 返回Math.floorMath.random*borderStyles.length； } 常量样式={ 填充：16px， 利润率：12像素， 边框：`${borderStyles[getIndex]}`， text对齐：居中， 显示：内联块， 过渡：0.2秒缓进， }; console.logstyle.border 从中可以获得边框样式

然后创建一个函数，该函数获取一个介于0和数组中边框样式数之间的随机数，该数字将是使用style对象中的字符串模板传递给边框类型数组的索引

const borderStyles=[无、虚线、虚线、实心、双精度、凹槽]； 函数getIndex{ 返回Math.floorMath.random*borderStyles.length； } 常量样式={ 填充：16px， 利润率：12像素， 边框：`${borderStyles[getIndex]}`， text对齐：居中， 显示：内联块， 过渡：0.2秒缓进， }; console.logstyle.border 用Math.random来选择三个数字，然后可能会想要四舍五入。我觉得在255下生成三个数字要比生成一个十六进制字符串更容易，因为用数字生成器生成这个数字要大得多。不过，这只是我的直觉，不知道这是否会对性能产生影响

// just for brevity, I would do this inline in practice.
const random = () => Math.floor(Math.random() * 255));

const style = {
    padding: '16px',
    margin: '12px',
    border: `rgb(${random()}, ${random()}, ${random()})`, // <--
    textAlign: 'center',
    display: 'inline-block',
    transition: '0.2s ease-in',
}

用Math.random来选择三个数字，然后可能会想要四舍五入。我觉得在255下生成三个数字要比生成一个十六进制字符串更容易，因为用数字生成器生成这个数字要大得多。不过，这只是我的直觉，不知道这是否会对性能产生影响

// just for brevity, I would do this inline in practice.
const random = () => Math.floor(Math.random() * 255));

const style = {
    padding: '16px',
    margin: '12px',
    border: `rgb(${random()}, ${random()}, ${random()})`, // <--
    textAlign: 'center',
    display: 'inline-block',
    transition: '0.2s ease-in',
}

---

如果您只想更改颜色，请按照此操作。我将边框宽度保持为1px且为实心

var randomColor = '#' + Math.floor(Math.random()*16777215).toString(16);

const style = {
  padding: '16px',
  margin: '12px',
  border: `1px solid ${randomColor}`,
  textAlign: 'center',
  display: 'inline-block',
  transition: '0.2s ease-in',
}

---

如果您只想更改颜色，请按照此操作。我将边框宽度保持为1px且为实心

var randomColor = '#' + Math.floor(Math.random()*16777215).toString(16);

const style = {
  padding: '16px',
  margin: '12px',
  border: `1px solid ${randomColor}`,
  textAlign: 'center',
  display: 'inline-block',
  transition: '0.2s ease-in',
}

---

那里！我认为一种方法是首先创建三个随机数在0到255之间的变量，然后将每个值赋给样式变量。使用插值将变量与字符串组合在一起：

let r = Math.floor(Math.random() * 256);
let g = Math.floor(Math.random() * 256);
let b = Math.floor(Math.random() * 256);

const style = {
//your code
border: `rgb(${r}, ${g}, ${b})`,
//more code
}

---

我真的希望这能奏效

在那里！我认为一种方法是首先创建三个随机数在0到255之间的变量，然后将每个值赋给样式变量。使用插值将变量与字符串组合在一起：

let r = Math.floor(Math.random() * 256);
let g = Math.floor(Math.random() * 256);
let b = Math.floor(Math.random() * 256);

const style = {
//your code
border: `rgb(${r}, ${g}, ${b})`,
//more code
}

我真的希望这能奏效

尝试以下操作：-

const style = {
    padding: '16px',
    margin: '12px',
    border: '#' + Math.floor(Math.random() * 0xFFFFFF).toString(16),
    textAlign: 'center',
    display: 'inline-block',
    transition: '0.2s ease-in',
}

请尝试以下操作：-

const style = {
    padding: '16px',
    margin: '12px',
    border: '#' + Math.floor(Math.random() * 0xFFFFFF).toString(16),
    textAlign: 'center',
    display: 'inline-block',
    transition: '0.2s ease-in',
}

尝试此操作以生成随机颜色。尝试此操作以生成随机颜色。