[英]React js random color
我在我的組件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>
);
}
}
您必須移動 function,它會在子組件中獲得隨機顏色。
目前,沒有子組件,您只需在父組件安裝時隨機化一次,然后使用隨機顏色 state 映射渲染卡片。
因此,我的建議是創建一個子組件,它在安裝時具有自己的隨機顏色 function 並分離顏色狀態。
然后,使用該子組件進行映射渲染並使用自己的顏色 state 顯示您的卡片。
長話短說:博士; 將parent的selectedColor single state移動到children自己的color state。
請參考我的codesandbox: https://codesandbox.io/s/color-randomizer-evogk?file=/src/ColorCard.js
嘗試更改_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>
);
});
您可以在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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.