javascript - 反应中的星级评分组件

Question

我是新来的反应，并开始通过 Alex Banks 和 Eve Porcello 的书学习反应。我有一个创建星级评分系统的部分，但目前我无法让它工作，谁能告诉我为什么？据我所知，我已经正确复制了代码，一切看起来都应该按预期工作。这是我的代码：

  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 中的组件时，stars selected 属性似乎总是​​设置为 false，我不知道为什么。感谢任何人都可以提供的任何帮助

标签： javascriptreactjs

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