导入后未定义组件

Question

我有一个来自Antd的折叠/手风琴组件，该组件是我自定义的，并从应用程序内的elements文件夹中导出，以便可以在整个应用程序中重用它。

我在组件内使用了React Hooks，以便将禁用/ setDisabled效果优雅地应用于Panel标题上的某些文本。

现在，当我导入组件并尝试更改面板的header属性时，我得到一个错误：

  

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