在 React 组件中多次重复作为 props 传递的函数

Question

我目前正在研究随机十六进制颜色生成器。我有我的 Hexa 组件和 App 组件，我在 App.js 中将 Hexa 组件作为道具传递，一切正常。但我面临的问题是我希望我的 Hexa 在浏览器上多次出现，而不是只显示一次。我的代码如下。六组分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>  );}应用程序.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>  );}

Answer 1

非常简单，只需使用假数组多次渲染六边形组件即可。

<div className='container'>

    <div className="child">

      {

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

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

        })

      }

    </div>

</div>

如果您只需要重复六边形颜色，请像那样更新六边形组件。

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>

    )

}

Answer 2

您应该重复您的 Hexa 组件。

我已经解决了这样的问题：

你的 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>

    );

};