Javascript react中的星级组件

我是一个新的反应，并已开始通过以下书籍学习反应亚历克斯银行和伊夫波切洛。我已经到了一个创建明星评级系统的部门，但目前我无法让它工作，有人能告诉我为什么吗？据我所知，我已经正确地复制了代码，一切看起来都应该按照预期的方式工作。以下是我的代码：

  const Star = ({ selected=false, onClick=f=>f }) =>
    <div className={ (selected) ? "star selected" : "star" } onClick={onClick}>
    </div>

Star.propTypes = {
    selected: PropTypes.bool,
    onClick: PropTypes.func
}

class StarRating extends React.Component {
    constructor(props) {
        super(props)
        this.state = { starsSelected: 0 }
        this.change = this.change.bind(this)
    }


    change(starsSelected) {
        this.setState({ starsSelected: 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} stars</p>
            </div>
        )
    }
}

StarRating.propTypes = {
    totalStars: PropTypes.number
}

StarRating.defaultProps = {
    totalStars: 5
}

const-Star=（{selected=false，onClick=f=>f}）=>
Star.propTypes={
已选择：PropTypes.bool，
onClick:PropTypes.func
}
类StarRating扩展了React.Component{
建造师（道具）{
超级（道具）
this.state={starsSelected:0}
this.change=this.change.bind（this）
}
更改（已选择开始）{
this.setState（{starsSelected:starsSelected}）
}
render（）{
const{totalStars}=this.props
const{starsSelected}=this.state
返回(
{[…数组（totalStars）].map（（n，i）=>
)}
{stars selected}个{totalStars}星中的{stars}

)
}
}
StarRating.propTypes={
totalStars:PropTypes.number
}
StarRating.defaultProps={
全天星：5
}

当检查react-dev工具中的组件时，似乎stars selected道具总是设置为false，我不知道为什么。感谢任何人提供的任何帮助

可以是两件事：

这行：

{[…数组（totalStars）].map（（n，i）=>

您需要以数字而不是字符串的形式传递

totalStars

：

或

您无法在星形组件中显示任何内容。请尝试以下操作：

const Star = ({ selected = false, onClick = f => f }) => (
  <div className={selected ? "star selected" : "star"} onClick={onClick}>
    Star
  </div>
);

const-Star=（{selected=false，onClick=f=>f}）=>(
明星
);

请参见一个工作示例：

---

共享的代码非常好。只需呈现此代码中触发单击事件的内容即可

 const Star = ({ selected=false, onClick=f=>f }) =>
    <div className={ (selected) ? "star selected" : "star" } onClick={onClick}>
    // Something to render maybe?
    </div>

const-Star=（{selected=false，onClick=f=>f}）=>
//有什么可以渲染的吗？

您的代码运行非常正常。请查看以下链接：

确保在声明css类时，star处于选中状态，否则，如果star类名称中有相同的样式字段，则不会显示选中的样式字段

---

在我的链接中的示例中，如果我在星级之上声明所选类别，则红色背景（所选样式属性）将被灰色背景（星级样式属性）覆盖。

直接注入：

npm I星级评级

关于此react软件包的参考信息：
为什么不使用类似于此的软件包来完成此任务？我认为您显示的代码中没有任何错误。我在这里使用了它：对星星的渲染方式进行了一些小的调整，效果很好。您能提供更多的代码吗？感谢大家的支持、回答和评论，他们让我意识到问题在于，star div的内容来自一个css文件，该文件没有正确加载，使得div无法读取。