0
votes

Couleur aléatoire de React js

J'utilise des couleurs aléatoires dans mon composant https://ibb.co/PwLSMYH , tout fonctionne bien, chaque fois que la page est actualisée, mes couleurs changent, tout va bien mais j'ai les mêmes couleurs pour chaque bloc, et je veux chaque bloc doit avoir des couleurs différentes (voici un exemple d'image 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>
        );
    }
}

javascript reactjs arrays random

0 commentaires

3 Réponses :

1
votes

Vous devez déplacer la fonction qui obtient une couleur aléatoire à l'intérieur des composants enfants.

Actuellement, il n'y a pas de composant enfant et vous ne faites une randomisation qu'une seule fois dans le composant parent lors du montage, puis effectuez un rendu cartographique des cartes en utilisant cet état de couleur aléatoire.

Donc, ma suggestion est de créer un composant enfant qui a sa propre fonction de couleur aléatoire lorsqu'il est monté et séparé les états de couleur.

Ensuite, utilisez ce composant enfant pour effectuer un rendu cartographique et afficher votre carte avec son propre état de couleur.

TL: DR; Déplace l'état unique selectedColor du parent dans l'état de couleur des enfants.

Veuillez vous référer à mon codesandbox: https://codesandbox.io/s/color-randomizer-evogk?file=/src/ColorCard.js

0 commentaires

1
votes

Essayez de changer votre fonction _getRandomColor pour obtenir juste une couleur aléatoire et ne changez pas l'état. Cette fonction sera alors une fonction pure.

Ensuite, vous pouvez ajouter une clé blockColor à chaque élément du tableau CoursesPage dans l'état:

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

Et utilisez-le lorsque vous effectuez le rendu des blocs:

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

0 commentaires

0
votes

Vous pouvez modifier la modification CoursesPage avant de rendre chaque élément de la méthode de render en appelant la méthode de reduce dessus pour modifier la structure de chaque objet et lui attacher une couleur aléatoire

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

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

0 commentaires