Компонент не определен после импорта

Question

У меня есть компонент свертывания / аккордеона из Antd, который я настроил и экспортировал из папки элементов из моего приложения, чтобы я мог повторно использовать его в приложении.

Я использовал React Hooks внутри компонента, чтобы элегантно применить эффект disabled / setDisabled к некоторому тексту в заголовке Panel.

Теперь, когда я импортирую компонент и пытаюсь изменить свойство заголовка Panel, я получаю ошибку:

AntCollapse не определен

ЕслиЯ просто импортирую и помещаю свой пользовательский компонент свертывания, заголовок которого пуст и искажен.

Я включил свой пользовательский файл свертывания ниже вместе с компонентом, в который я пытался импортировать его.

// @CustomCollapse
import React, { useState } from 'react'
import styled from 'styled-components'
import { Collapse as AntCollapse } from 'antd'

const StyledCollapse = styled(AntCollapse)`
  &&& {
    border: none;
    border-radius: 0px;
    background-color: #f7f7f7;
    box-shadow: none;
  }
`

const CustomCollapse = props => {
  const [disabled, setDisabled] = useState(true)
  return (
    <StyledCollapse onChange={() => setDisabled(prev => !prev)}>
      <AntCollapse.Panel
        header={props.header}
        key="1"
        showArrow={false}
        bordered={false}
        extra={<p style={{ color: '#0076de' }}>{disabled ? 'SHOW' : 'HIDE'}</p>}
      />
    </StyledCollapse>
  )
}

export default CustomCollapse

// @App
import React from 'react'
import styled from 'styled-components'
import { Col, Row } from 'antd'
import Checkbox from '../elements/Checkbox'
import icon from '../../assets/caretDown.svg'
import Button from '../elements/Button'
import CustomCollapse from '../elements/Collapse'

const ConfigurationOptions = ({ configuration, ...props }) => (

  <Container>
    <Row>
      <Col span={12}>
        <CustomCollapse>
          {/* <AntCollapse.Panel header="configuration test" /> */}
        </CustomCollapse>
      </Col>
    </Row>
  </Container>
)

const Container = styled.div`
  text-align: left;
`

export default ConfigurationOptions

Answer 1

AntCollapse не определено, потому что вы не import это.

Вы использовали export default CustomCollapse, по умолчанию вы можете назвать свой компонент так, как вам нравится, поэтому просто:

import AntCollapse from '../elements/Collapse'; // No CustomCollapse

const ConfigurationOptions = ({ configuration, ...props }) => (

  <Container>
    <Row>
      <Col span={12}>
        <AntCollapse>                           // CustomCollapse not defined
          <AntCollapse.Panel header="configuration test" />
        </AntCollapse>
      </Col>
    </Row>
  </Container>
)

export default ConfigurationOptions