在 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>

  );

}

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

非常简单，只需使用假数组多次渲染六边形组件即可。<div className='container'>&nbsp; &nbsp; <div className="child">&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; new Array(10).fill(0).map((item, i) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return <Hexa&nbsp; key={i} hexaColor={hexaColor}/>&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; </div></div>如果您只需要重复六边形颜色，请像那样更新六边形组件。function Hexa(props) {&nbsp; return (&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <div className="child_content"> <h1>Random Colors</h1>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h2>Hexadecimal Colors</h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; new Array(10).fill(0).map((item, i) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <React.Fragment key={i}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div&nbsp; className="background_div" style={{ backgroundColor: props.hexaColor() }} >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="hexa_center"> {props.hexaColor() } </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </React.Fragment>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; )}function App() {&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;const hexaColor = () => {&nbsp; &nbsp; let str = '0123456789abcdef'&nbsp; &nbsp; let color = ''&nbsp; &nbsp; for (let i = 0; i < 6; i++) {&nbsp; &nbsp; &nbsp; let index = Math.floor(Math.random() * str.length);&nbsp; &nbsp; &nbsp; color += str[index];&nbsp; &nbsp; &nbsp; console.log(color);&nbsp; &nbsp; }&nbsp; &nbsp; return '#' + color&nbsp;&nbsp; }&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div className='container'>&nbsp; &nbsp; &nbsp; &nbsp; <div className="child">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Hexa hexaColor={hexaColor}/>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; )}

Answer 2

您应该重复您的 Hexa 组件。我已经解决了这样的问题：你的 App.jsimport React from "react";import Hexa from "./components/Hexa";export default function App() {&nbsp; const hexaColor = () => {&nbsp; &nbsp; let str = "0123456789abcdef";&nbsp; &nbsp; let color = "";&nbsp; &nbsp; for (let i = 0; i < 6; i++) {&nbsp; &nbsp; &nbsp; let index = Math.floor(Math.random() * str.length);&nbsp; &nbsp; &nbsp; color += str[index];&nbsp; &nbsp; }&nbsp; &nbsp; return "#" + color;&nbsp; };&nbsp; const createManyHexaComp = (iteration) => {&nbsp; &nbsp; let result;&nbsp; &nbsp; for (let i = 0; i < iteration; i++) {&nbsp; &nbsp; &nbsp; result = <>&nbsp; &nbsp; &nbsp; &nbsp; {result}&nbsp; &nbsp; &nbsp; &nbsp; <Hexa hexaColor={hexaColor} />&nbsp; &nbsp; &nbsp; </>;&nbsp; &nbsp; }&nbsp; &nbsp; return result;&nbsp; }&nbsp; return (&nbsp; &nbsp; <div className="container">&nbsp; &nbsp; &nbsp; <div className="child">&nbsp; &nbsp; &nbsp; &nbsp; <div className="child_content">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {" "}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h1>Random Colors</h1>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h2>Hexadecimal Colors</h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {createManyHexaComp(5)}&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; );}你的 Hexa 组件import React from 'react';export default function Hexa(props) {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className="background_div"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; style={{ backgroundColor: props.hexaColor() }}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="hexa_center"> {props.hexaColor()} </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );};