第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

呈現(xiàn)數(shù)字?jǐn)?shù)組的 React 組件的不同背景顏色

呈現(xiàn)數(shù)字?jǐn)?shù)組的 React 組件的不同背景顏色

慕無(wú)忌1623718 2023-05-19 16:00:55
我要在 React 組件中生成不同的背景顏色,該組件返回一個(gè)從 1 到 100 的數(shù)字?jǐn)?shù)組。偶數(shù)以及奇數(shù)和質(zhì)數(shù)應(yīng)具有單獨(dú)的顏色。目前,我的隨機(jī)組件在 App 組件中呈現(xiàn)。我現(xiàn)在的問(wèn)題是如何為偶數(shù)、奇數(shù)和質(zhì)數(shù)生成這些顏色。到目前為止我所做的在下面。應(yīng)用組件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>    )}數(shù)字組件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;}
查看完整描述

3 回答

?
蕭十郎

TA貢獻(xiàn)1815條經(jīng)驗(yàn) 獲得超13個(gè)贊

你可以這樣做


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

}


查看完整回答
反對(duì) 回復(fù) 2023-05-19
?
慕工程0101907

TA貢獻(xiàn)1887條經(jīng)驗(yàn) 獲得超5個(gè)贊

以下 css 使奇數(shù)背景為灰色,偶數(shù)背景為銀色,素?cái)?shù)背景為粉紅色:


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

}


查看完整回答
反對(duì) 回復(fù) 2023-05-19
?
千巷貓影

TA貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超7個(gè)贊

這對(duì)我有用,我調(diào)用 random() 函數(shù),它從數(shù)組中生成隨機(jī)顏色。


const random = () => {

    const backgroundColor = ["#134563", "#27ae60", "#3263F3", "#FFDC61"];

    const randomColors = backgroundColor[Math.floor(Math.random() * backgroundColor.length + 0)];

    return randomColors;

  }

random();


查看完整回答
反對(duì) 回復(fù) 2023-05-19
  • 3 回答
  • 0 關(guān)注
  • 304 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)