Question

我是新来的人，我已经开始学习亚历克斯·班克斯和夏娃·波切洛的书。我到了创建星级评定系统的部分，但目前无法正常运行，有人可以告诉我为什么吗？据我所知，我已经正确复制了代码，一切看起来都应该可以正常工作。这是我的代码：

  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
}

在检查react-dev-tools中的组件时，似乎将星标选择的prop始终设置为false，我不知道为什么。感谢您提供任何帮助

Answer 1

可能有两件事：

此行：{[...Array(totalStars)].map((n,i) => 您需要将totalStars作为数字而不是字符串传递：

<StarRating totalStars={5} />

或

您没有在Star组件中显示任何内容。试试这个：

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

查看有效示例：

https://codesandbox.io/s/52ox6wmwwk

Answer 2

共享的代码非常好。只需从此代码中渲染将触发点击事件的内容即可。

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

Answer 3

直接注入npm i star-based-rating。

有关此React软件包的参考：star-based-rating

Answer 4

您的代码运行正常。查看此链接：https://codesandbox.io/s/01wqmzrpjl

请确保在声明css类中的star处于选中状态上方，否则，如果star className中具有相同的样式字段，则不会显示选定的样式字段。

在我的链接中的示例，如果我声明选定的类高于星级，则红色背景（选定的样式属性）被灰色背景（星形样式的属性）覆盖。

反应中的星级评分组件

4 个答案: