class StarRating extends React.Component{
constructor(props) {
super(props)
this.state = {
starsSelected: props.starsSelected
}
this.change = this.change.bind(this)
}
change(starsSelected) {
this.setState({starsSelected})
}
render() {
const {totalStars} = this.props;
const {starsSelected} = this.state;
return(
<div className="star-rating">
{
[...Array(totalStars)].map((n,i) =>
<Star key={i} selected={i<starsSelected} onClick={() => this.change(i+1)}/>
)
}
<p>{starsSelected} of {totalStars}</p>
</div>
)
}
}
StarRating.propTypes = {
totalStars: PropTypes.number
}
StarRating.defaultProps = {
totalStars: 5
}上述为ES6 类创建组件
const StarRating = createClass({
display: "StarRating",
propTypes: {
totalStars: propTypes.number
},
getDefaultProps() {
return {
totalStars: 5
}
},
getInitialState() {
return {
starsSelected: 0
}
},
change(starsSelected) {
this.setState({starsSelected})
},
render() {
const {totalStars} = this.props;
const {starsSelected} = this.state;
return(
<div className="state-rating">
{
[...Array(totalStars).map((n,i) => {
<Star key={i} selected={i<starsSelected} onClick={() => this.change(i+1)}/>
}
)]
}
<p>{starsSelected} of {totalStars}</p>
</div>
)
}
})
const Star = ({selected=false,onClick=f=>f}) =>
<div className={ selected ? 'star selected' : 'star'} onClick = {onClick}></div>
Star.propTypes = {
selected: PropTypes.bool,
onClick: PropTypes.func
}上述为无状态函数组件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script src="https://cdn.bootcss.com/prop-types/15.6.1/prop-types.js"></script>
<style>
.star{
cursor: pointer;
height: 25px;
width: 25px;
margin: 2px;
float: left;
background-color: grey;
clip-path: polygon(
50% 0%,
63% 38%,
100% 38%,
69% 59%,
82% 100%,
50% 75%,
18% 100%,
31% 59%,
0% 38%,
37% 38%
)
}
.star.selected{
background-color: red;
}
p{
float:left;
margin-left: 20px;
margin-top: 4px;
}
</style>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
const Star = ({selected=false,onClick=f=>f}) =>
<div className={ selected ? 'star selected' : 'star'} onClick = {onClick}></div>
Star.propTypes = {
selected: PropTypes.bool,
onClick: PropTypes.func
}
// const StarRating = createClass({
// display: "StarRating",
// propTypes: {
// totalStars: propTypes.number
// },
// getDefaultProps() {
// return {
// totalStars: 5
// }
// },
// getInitialState() {
// return {
// starsSelected: 0
// }
// },
// change(starsSelected) {
// this.setState({starsSelected})
// },
// render() {
// const {totalStars} = this.props;
// const {starsSelected} = this.state;
// return(
// <div className="state-rating">
// {
// [...Array(totalStars).map((n,i) => {
// <Star key={i} selected={i<starsSelected} onClick={() => this.change(i+1)}/>
// }
// )]
// }
// <p>{starsSelected} of {totalStars}</p>
// </div>
// )
// }
// })
class StarRating extends React.Component{
constructor(props) {
super(props)
this.state = {
starsSelected: props.starsSelected
}
this.change = this.change.bind(this)
}
change(starsSelected) {
this.setState({starsSelected})
}
render() {
const {totalStars} = this.props;
const {starsSelected} = this.state;
return(
<div className="star-rating">
{
[...Array(totalStars)].map((n,i) =>
<Star key={i} selected={i<starsSelected} onClick={() => this.change(i+1)}/>
)
}
<p>{starsSelected} of {totalStars}</p>
</div>
)
}
}
StarRating.propTypes = {
totalStars: PropTypes.number
}
StarRating.defaultProps = {
totalStars: 5
}
ReactDOM.render(<StarRating totalStars={7} starsSelected={3}/>,document.getElementById("example"))
</script>
</body>
</html>