@PlasterTom

Откуда в этом коде приходит функция toggleOpen?

Добрый день всем. Подскажите, как же мы в этом коде используем свойство isOpen и функцию toggleOpen, ели в импортах их нет? Код всего учебного приложения по ссылке

Заранее спасибо.

import React, {Component, PureComponent} from 'react'
import {findDOMNode} from 'react-dom'
import {connect} from 'react-redux'
import PropTypes from 'prop-types'
import CommentList from '../CommentList'
import { CSSTransitionGroup } from 'react-transition-group'
import {deleteArticle, loadArticle} from '../../AC'
import Loader from '../Loader'
import LocalizedText from '../LocalizedText'
import './style.css'

class Article extends Component {
    static propTypes = {
        id: PropTypes.string.isRequired,
        isOpen: PropTypes.bool,
        toggleOpen: PropTypes.func,
        //from connect
        article: PropTypes.shape({
            id: PropTypes.string,
            title: PropTypes.string,
            text: PropTypes.string
        })
    }

    state = {
        updateIndex: 0,
        areCommentsOpen: false
    }

    componentDidMount() {
        const {loadArticle, article, id} = this.props
        if (!article  || (!article.text && !article.loading)) loadArticle(id)
    }

/*
    shouldComponentUpdate(nextProps, nextState) {
        return nextProps.isOpen !== this.props.isOpen
    }
*/

    render() {
        const {article, isOpen, toggleOpen} = this.props
        if (!article) return null
        return (
            <div ref = {this.setContainerRef}>
                <h3>{article.title}</h3>
                <button onClick = {this.handleDelete}><LocalizedText>delete me</LocalizedText></button>
                <CSSTransitionGroup
                    transitionName = 'article'
                    transitionAppear
                    transitionEnterTimeout = {300}
                    transitionLeaveTimeout = {500}
                    transitionAppearTimeout = {500}
                    component = 'div'
                >
                    {this.getBody()}
                </CSSTransitionGroup>
            </div>
        )
    }

    handleDelete = () => {
        const {deleteArticle, article} = this.props
        deleteArticle(article.id)
        console.log('---', 'deleting article')
    }

    setContainerRef = ref => {
        this.container = ref
//        console.log('---', ref)
    }

    getBody() {
        const {article, isOpen} = this.props
        if (!isOpen) return null
        if (article.loading) return <Loader/>
        return (
            <section>
               {article.text}
               <CommentList article = {article} ref = {this.setCommentsRef} key = {this.state.updateIndex}/>
            </section>
        )
    }

    setCommentsRef = ref => {
        this.comments = ref
//        console.log('---', ref)
    }
}

export default connect((state, ownProps) => {
        return {
            article: state.articles.entities.get(ownProps.id)
        }
    },
    { deleteArticle, loadArticle },
    null,
    { pure: false }
)(Article)
  • Вопрос задан
  • 113 просмотров
Пригласить эксперта
Ответы на вопрос 1
@davidnum95
Откуда в этом коде приходит функция toggleOpen?

const {article, isOpen, toggleOpen} = this.props

Очевидно, что из пропсов.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы