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

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

在 React 組件中多次重復(fù)作為 props 傳遞的函數(shù)

在 React 組件中多次重復(fù)作為 props 傳遞的函數(shù)

我目前正在研究隨機(jī)十六進(jìn)制顏色生成器。我有我的 Hexa 組件和 App 組件,我在 App.js 中將 Hexa 組件作為道具傳遞,一切正常。但我面臨的問(wèn)題是我希望我的 Hexa 在瀏覽器上多次出現(xiàn),而不是只顯示一次。我的代碼如下。六組分import React from "react";export default function Hexa(props) {  return (    <div>      <div className="child_content">        {" "}        <h1>Random Colors</h1>        <h2>Hexadecimal Colors</h2>        <div          className="background_div"          style={{ backgroundColor: props.hexaColor() }}        >          <div className="hexa_center"> {props.hexaColor()} </div>        </div>      </div>    </div>  );}應(yīng)用程序.jsimport React from "react";import Hexa from "./Hexa";import "./Style.css";export default function App() {  const hexaColor = () => {    let str = "0123456789abcdef";    let color = "";    for (let i = 0; i < 6; i++) {      let index = Math.floor(Math.random() * str.length);      color += str[index];    }    return "#" + color;  };  return (    <div className="container">      <div className="child">        <Hexa hexaColor={hexaColor} />      </div>    </div>  );}
查看完整描述

2 回答

?
RISEBY

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

非常簡(jiǎn)單,只需使用假數(shù)組多次渲染六邊形組件即可。


<div className='container'>

    <div className="child">

      {

        new Array(10).fill(0).map((item, i) => {

          return <Hexa  key={i} hexaColor={hexaColor}/>

        })

      }

    </div>

</div>

如果您只需要重復(fù)六邊形顏色,請(qǐng)像那樣更新六邊形組件。


function Hexa(props) {

  return (

    <div>

      <div className="child_content"> <h1>Random Colors</h1>

          <h2>Hexadecimal Colors</h2>

          {

            new Array(10).fill(0).map((item, i) => {

              return (

                <React.Fragment key={i}>

                <div  className="background_div" style={{ backgroundColor: props.hexaColor() }} >

                  <div className="hexa_center"> {props.hexaColor() } </div>

                </div>

                </React.Fragment>

              )

            })

          }

        

    </div>

    </div>

  )

}



function App() {

    

   const hexaColor = () => {

    let str = '0123456789abcdef'

    let color = ''

    for (let i = 0; i < 6; i++) {

      let index = Math.floor(Math.random() * str.length);

      color += str[index];

      console.log(color);

    }

    return '#' + color 

  }



    return (

      <div className='container'>

        <div className="child">

            <Hexa hexaColor={hexaColor}/>

        </div>

        

      </div>

    )

}


查看完整回答
反對(duì) 回復(fù) 2023-05-19
?
一只萌萌小番薯

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

您應(yīng)該重復(fù)您的 Hexa 組件。

我已經(jīng)解決了這樣的問(wèn)題:


你的 App.js


import React from "react";

import Hexa from "./components/Hexa";


export default function App() {


  const hexaColor = () => {

    let str = "0123456789abcdef";

    let color = "";

    for (let i = 0; i < 6; i++) {

      let index = Math.floor(Math.random() * str.length);

      color += str[index];

    }

    return "#" + color;

  };


  const createManyHexaComp = (iteration) => {

    let result;

    for (let i = 0; i < iteration; i++) {

      result = <>

        {result}

        <Hexa hexaColor={hexaColor} />

      </>;

    }

    return result;


  }


  return (

    <div className="container">

      <div className="child">

        <div className="child_content">

          {" "}

          <h1>Random Colors</h1>

          <h2>Hexadecimal Colors</h2>

          {createManyHexaComp(5)}

        </div>

      </div>

    </div>

  );

}

你的 Hexa 組件


import React from 'react';

export default function Hexa(props) {



    return (

        <div>

            <div

                className="background_div"

                style={{ backgroundColor: props.hexaColor() }}

            >

                <div className="hexa_center"> {props.hexaColor()} </div>

            </div>

        </div>

    );

};


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

添加回答

舉報(bào)

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號(hào)

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