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

Question

I'm Presently working on random Hexadecimal color generators. I have my Hexa component and App component, I'm passing the Hexa component as a props in App.js and everything is working fine. But the problem I'm facing is that I want my Hexa to appear multiple times on the browser rather than once that it's showing. My code below.

Hexa component

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>
  );
}

App.js

import 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

it's so simple just render the hexa component multiple times with fake array.

<div className='container'>
    <div className="child">
      {
        new Array(10).fill(0).map((item, i) => {
          return <Hexa  key={i} hexaColor={hexaColor}/>
        })
      }
    </div>
</div>

in case you need just the hexa color to be repeated, update the hexa component like that.

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

You should repeat your Hexa component.
I have solved like this:

Your 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>
  );
}

Your Hexa component

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>
    );
};