反应以动态渲染一定数量的组件 [英] React to render dynamically a certain number of components
本文介绍了反应以动态渲染一定数量的组件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想根据用户获得的积分数(this.state.points)显示一些Star组件(material-ui组件).
I would like to display a number of the component Star (material-ui component) based on the number of points the user has earned (this.state.points).
我不知道该怎么做.
import React, { Component } from "react";
import { Star } from "@material-ui/icons";
Points extends Component {
constructor(props) {
super(props);
this.state = {
points: 6
};
}
render() {
return (
<div>
<p>
+ {this.state.points} points
<Star />
</p>
</div>
);
}
}
export default Points;
推荐答案
You can use Array.fill
to create new Array with this.state.points
number of empty slots which you then fill with the <Star />
component like so:
import React, { Component } from "react";
import { Star } from "@material-ui/icons";
class Points extends Component {
constructor(props) {
super(props);
this.state = {
points: 6
};
}
render() {
return (
<div>
<p>
+ {this.state.points} points
// This is where the magic happens
{Array(this.state.points).fill(<Star />)}
</p>
</div>
);
}
}
export default Points;
这是一个有效的沙箱: https://codesandbox.io/s/vj3xpyn0x0
Here is a working Sandbox : https://codesandbox.io/s/vj3xpyn0x0
这篇关于反应以动态渲染一定数量的组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文