javascript - react 中的星级评分组件

Question

我是 React 新手，已经开始阅读 Alex Banks 和 Eve Porcello 的书来学习 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
}

在检查 react-dev-tools 中的组件时，似乎 stars selected 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