在 React 組件中多次重復作為道具傳遞的函數

Question

我目前正在研究隨機十六進制顏色生成器。 我有我的 Hexa 組件和 App 組件，我將 Hexa 組件作為 App.js 中的道具傳遞，一切正常。 但我面臨的問題是我希望我的 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>
  );
}

應用程序.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

它是如此簡單，只需使用假數組多次渲染 hexa 組件。

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