渲染数字数组的React组件的不同背景颜色

Question

我在React组件中生成不同的背景色，该组件返回从1到100的数字数组。

偶数应该有一个单独的颜色以及奇数和素数。

目前，我在应用程序组件中有我的随机组件呈现。

我现在的问题是如何为偶数、奇数和素数生成这些颜色。

到目前为止，我所做的一切都在下面。

应用程序组件

import React from 'react'
import Numbers from './Numbers'
import './Style.css'
export default function App() {
// const numbers = [1]
const numbers = [];
for(let i=0; i<=31; i++){
numbers.push(i);
if(i % 2 === 0){
// numbers.style.backgroundColor = 'green' ; 
}
}
return (
<div className='container'>
<div className="child">
<h1>Numbers List</h1>
<ul>
<Numbers className="block" numbers={numbers} />
{/* <Numbers/> */}
</ul>
</div>

</div>
)
}

数字组件

import React from 'react'
export default function Numbers({ numbers }) {
const list = numbers.map((number) => 
<div key={number} className="numbers"><li  className="list">{number}</li></div>
)
return list
}

样式表

body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
} 
.container{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
} 
.numbers{
background-color: pink;
width: 100px;
height: 100px;
border-right: 1px solid gray;
border-bottom: 1px solid aliceblue;
display: inline-flex;
justify-content: center;
align-items: center;
}
li{
text-align: center;
padding-top: 15px;
font-size: 1.2rem;
padding-left: 15px;
}

Answer 1

您可以执行类似的操作

import React from 'react'
export default function Numbers({ numbers }) {
const isPrime = num => {
for(let i = 2; i < num; i++)
if(num % i === 0) return false;
return num > 1;
}
const isOdd = (num)=> { return num % 2;} 
const getBackGroundColor = (num)=>{
let color = 'red';
if(isOdd (num)) color ='red' //even
else color ='green' //odd
if(isPrime(num)) color = 'orange' //prime 
return color ;
}
const list = numbers.map((number) => 
<div key={number} style={{backgroundColor: getBackGroundColor(number) }} className="numbers"><li  className="list">{number}</li></div>
)
return list
}

Answer 2

以下css使奇数背景为灰色，偶数背景为银色，素数背景为粉红色：

li:nth-child(2),
li:nth-child(odd) {
background: pink;
}
li:first-child,
li:nth-child(3n+6),
li:nth-child(5n+10),
li:nth-child(7n+14)
{
background: grey
}
li:nth-child(2n+4) {
background: silver
}

Answer 3

这对我来说很有效，我调用random((函数，它从数组中生成随机颜色。

const random = () => {
const backgroundColor = ["#134563", "#27ae60", "#3263F3", "#FFDC61"];
const randomColors = backgroundColor[Math.floor(Math.random() * backgroundColor.length + 0)];
return randomColors;
}
random();