Для чего props указаны явно?

Question

[PlasterTom]

Почему в первой строчке в функциональном компоненте вместо (props) явно перечислены свойства {comments=[], isOpen, toggleOpen} ? Это связано с использованием декоратора?

function CommentList ({comments=[], isOpen, toggleOpen}){
    const text = isOpen ? 'hide comments': 'show comments'
        return(
            <div>
                <button onClick={toggleOpen}>{text}</button>
                {getBody(comments,isOpen)}
            </div>
        )
}

function getBody(comments,isOpen) {
    if (!isOpen) return null
    if (!comments.length) return (
    <div>
        <p>No comments yet</p>
    </div>
    )
    return (
    <div>
        <ul>
            {comments.map(comment => <li key={comment.id} ><Comment comment={comment}/></li>)}
        </ul>
    </div>
    )
}

export default toggleOpen(CommentList)

И на самом деле у меня есть второй вопрос по работе декоратора. Строчка

<OriginalComponent {...this.props} isOpen={this.state.isOpen} toggleOpen={this.toggleOpen}/>

- какие ...this.props сюда передаются? WrappedComponent-а? А какие у него пропсы?

export default (OriginalComponent)=> class WrappedComponent extends Component {
    
    state = {
        isOpen: false
    }

 toggleOpen = (ev) => {
     ev && ev.preventDefault && ev.preventDefault()
        this.setState({
         
          commnetsIsOpen: !this.state.commnetsIsOpen  
        })
    }
    render() {
        return <OriginalComponent {...this.props} isOpen={this.state.isOpen} toggleOpen={this.toggleOpen}/>
    }
}

Answer 1

[vlad_kopylov]

Это называеться Деструктуризация объекта

Comments

[PlasterTom]

про деструктуризацию знаю, если честно не очень понял ОТКУДА мы берем пропсы, которые потом спредом присваиваем в OriginalComponent