React js 随机颜色

Question

我在我的组件https://ibb.co/PwLSMYH中使用随机 colors，一切正常，每次刷新页面时，我的 colors 更改，一切都很好，但每个块都有相同的 colors，我想要每个块都有不同的 colors（这里是示例图片https://ibb.co/jbz50nt ）

import React from 'react';
import "./Achievements.css";

import crown from "./icons/online-course.png"
import goal from "./icons/goal.png"
import money from "./icons/money.png"
import target from "./icons/target.png"
import clipboard from "./icons/clipboard.png"
import climbing from "./icons/climbing.png"

export class AchievementsBeta extends React.Component {
    constructor() {
        super();
        this.state = {
            CoursesPage: [
                {
                    img: crown,
                    cardInfo: "Engaged in!",
                    cardLabel: "Complete the lesson",
                    cardColorStyle: 'card__fire',
                },

                {
                    img: goal,
                    cardInfo: "The first path to victory",
                    cardLabel: "complete five courses",
                    cardColorStyle: 'card__fire',
                },

                {
                    img: money,
                    cardInfo: "Piggy bank",
                    cardLabel: "Earn 100 XP",
                    cardColorStyle: 'card__fire',
                },

                {
                    img: target,
                    cardInfo: "Sniper",
                    cardLabel: "Complete the course without errors",
                    cardColorStyle: 'card__fire',
                },

                {
                    img: clipboard,
                    cardInfo: "Dear Citizen",
                    cardLabel: "Fill in all credentials",
                    cardColorStyle: 'card__fire',
                },

                {
                    img: climbing,
                    cardInfo: "My first avatar",
                    cardLabel: "Set avatar",
                    cardColorStyle: 'card__fire',
                },
            ],

            bgColor: [
                '#1ec891',
                '#ff725e',
                '#ffd05b',
            ],

            selectedColor: '',
        }
    }

    componentDidMount() {
        this._getRandomColor()
    }

    _getRandomColor(){
        const item = this.state.bgColor[Math.floor(Math.random()*this.state.bgColor.length)];
        this.setState({
            selectedColor: item,
        })
    }

    render() {

        const resultsRender = this.state.CoursesPage.map((user, index) => {
            return (

                <div style={{ width: "100%", marginBottom: "35px" }} key={index}>
                    <div style={{borderLeft: `5px solid ${this.state.selectedColor} `}} className={`${"Beta"} ${"card__fire"}`}>
                        <div className={"imgContainer"}>
                            <img src={user.img} alt="" />
                        </div>

                        <div>
                            <div className="cardInfo">
                                <p>{user.cardInfo}</p>
                            </div>

                            <div className="cardDescription">
                                <p>{user.cardLabel}</p>
                            </div>
                        </div>
                    </div>
                </div>

            );
        }

        );

        return (
            <div>
                {resultsRender}
            </div>
        );
    }
}

Answer 1

您必须移动 function，它会在子组件中获得随机颜色。

目前，没有子组件，您只需在父组件安装时随机化一次，然后使用随机颜色 state 映射渲染卡片。

因此，我的建议是创建一个子组件，它在安装时具有自己的随机颜色 function 并分离颜色状态。

然后，使用该子组件进行映射渲染并使用自己的颜色 state 显示您的卡片。

长话短说：博士； 将parent的selectedColor single state移动到children自己的color state。

请参考我的codesandbox： https://codesandbox.io/s/color-randomizer-evogk?file=/src/ColorCard.js

Answer 2

尝试更改_getRandomColor function 以获得随机颜色，不要更改 state。function 将成为纯 function。

然后你可以在 state 中的CoursesPage数组的每个元素中添加一个blockColor键：

this.state = {
  CoursesPage: [
    {
      img: crown,
      cardInfo: "Engaged in!",
      cardLabel: "Complete the lesson",
      cardColorStyle: 'card__fire',
      blockColor: this._getRandomColor(),
    },
    ...
  ],   
}        

并在渲染块时使用它：

const resultsRender = this.state.CoursesPage.map((user, index) => {
  return (
    <div style={{ width: "100%", marginBottom: "35px" }} key={index}>
      <div
        style={{ borderLeft: `5px solid ${user.blockColor} ` }}
        className={`${"Beta"} ${"card__fire"}`}
      >
        <div className={"imgContainer"}>
          <img src={user.img} alt="" />
        </div>

        <div>
          <div className="cardInfo">
            <p>{user.cardInfo}</p>
          </div>

          <div className="cardDescription">
            <p>{user.cardLabel}</p>
          </div>
        </div>
      </div>
    </div>
  );
});

Answer 3

您可以在render方法中渲染每个项目之前更改 change CoursesPage ，方法是在其上调用reduce方法以更改每个 object 的结构并为其附加随机颜色

 class App extends React.Component { constructor(props) { super(props); this.state = { CoursesPage: [ { img: "crown", cardInfo: "Engaged in,": cardLabel, "Complete the lesson": cardColorStyle, 'card__fire', }: { img, "goal": cardInfo, "The first path to victory": cardLabel, "complete five courses": cardColorStyle, 'card__fire', }: { img, "money": cardInfo, "Piggy bank": cardLabel, "Earn 100 XP": cardColorStyle, 'card__fire', }: { img, "target": cardInfo, "Sniper": cardLabel, "Complete the course without errors": cardColorStyle, 'card__fire', }: { img, "clipboard": cardInfo, "Dear Citizen": cardLabel, "Fill in all credentials": cardColorStyle, 'card__fire', }: { img, "climbing": cardInfo, "My first avatar": cardLabel, "Set avatar": cardColorStyle, 'card__fire', }, ]: bgColor, [ '#1ec891', '#ff725e', '#ffd05b', ]. } } render() { let courses = [...this.state.CoursesPage].map((course) => { return {..,course: bgColor. this.state.bgColor[Math.floor(Math.random() * this.state.bgColor.length)] } }) return <ul> {courses,map((c: idx) => { return (<li key={idx} style={{ backgroundColor. `${c.bgColor}` }}> {c;cardInfo} </li>). })} </ul> } } ReactDOM,render(<App />. document;querySelector('#root'));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div>