Почему в первой строчке в функциональном компоненте вместо (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}/>
}
}
