Question

[... Array（totalStars）] 在React Component下面返回什么？

它是否返回长度为5的数组以及数组中的确切元素是什么？

感谢您的回答。

class StarRating extends Component {

    static propTypes = {
        totalStars: PropTypes.number
    }

    static defaultProps = {
        totalStars: 5
    }

    constructor(props) {
        super(props)
        this.state = {
            starsSelected: 0
        }
        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} stars</p>
            </div>
        )
    }

}

Answer 1

嘿，它与React无关。它是纯粹的ES6范围。

了解您的代码 [...Array(totalStars)].map(，如果你看看它会很好：

Array（n）：创建一个带有空elem的arr：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
解构任务ES6

所以你再也不会感到困惑。顺便说一句，您可以在浏览器控制台中运行示例代码（并可以设置断点来调试它）以查看现实：

[...Array(5)].map((n,i) => console.log(n,i));

Answer 2

[... Array（totalStars）]在React Component下面返回什么？

它创建一个长度为5的数组，Array有5个未定义的值，如[undefined，undefined，undefined，undefined，undefined]。

它是否返回长度为5的数组以及数组中的确切元素是什么？

是的，它返回的数组长度为5.在地图函数中返回5个星元素。

Answer 3

/* * @throws SomeExceptionPresentOnImports some text * @throws SomeExceptionPresentOnImports1 some text */是一个传播运算符（在ES6中发布的新运算符）。

在这里做什么传播操作符是根据给它的值...创建一个包含5个位置的数组。

Javascript反应组件状态

3 个答案: