React AntD Forms Error Тип элемента недопустим: ожидается строка (для встроенных компонентов)

Question

Я сталкиваюсь с этой ошибкой при попытке использовать формы AntD:

Element type is invalid: expected a string (for built-in components)

Я провел исследование, и во многих темах обсуждается, как компонент импортируется / экспортируется

Однако я не уверен, является ли это моей проблемой.Вот мои компоненты:

**** Компонент регистрации ****

import React, { Component } from 'react'

/** UI Framework Components **/
import { Button, Form, Icon, Input } from 'antd'

class FormWrapper extends Component {
render() {
    const { getFieldDecorator } = this.props.form

return (
  <Form layout={'horizontal'}>
    <Form.Item>
      {getFieldDecorator('userName', {
        rules: [{ required: true, message: 'Please input your username!' }]
      })(<Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />)}
    </Form.Item>
  </Form>
  )
 }
}

export const RegistrationForm = Form.create()(FormWrapper)

**** Импортированный компонент ****

import React, { Component } from 'react'

/** Components **/
import { RegistrationForm } from 'Components/RegistrationForm'

/** UI Framework Components **/
import { Card, Tabs } from 'antd'

/** Styled Components **/
const Wrapper = styled(Card)`
  ${center()};
  width: 500px;
`

const TabPane = Tabs.TabPane 

export class LoginRegisterContainer extends Component {
  state = {
    activeTab: '1'
  }

render() {
   const { activeTab } = this.state

return (
  <Wrapper>
    <Tabs defaultActiveKey={activeTab}>
      <TabPane tab="Register" key="1">
        <RegistrationForm />
      </TabPane>
      <TabPane tab="Log In" key="2">
        <LogIn />
      </TabPane>
    </Tabs>
  </Wrapper>
   )
  }
}

IЯ могу импортировать все компоненты из библиотеки без проблем, но при попытке использовать форму, когда это происходит.

Answer 1

Сначала я выполнил ваш код, проверил на наличие ошибок, действительно вернул существующие компоненты, возможно, вы не опубликовали его, а затем я настроил его, и он был готов к запуску.

    import React, { Component } from 'react'

    /** Components **/
    import { RegistrationForm } from './components/RegistrationForm'

    /** UI Framework Components **/
    import { Tabs } from 'antd'

    const TabPane = Tabs.TabPane

    export default class LoginRegisterContainer extends Component {
      state = {
        activeTab: '1',
      }

      render () {
        const {activeTab} = this.state

        return (
          <div>
            <Tabs defaultActiveKey={activeTab}>
              <TabPane tab="Register" key="1">
                <RegistrationForm/>
              </TabPane>
              <TabPane tab="Log In" key="2">
                {/*<LogIn/>*/}
              </TabPane>
            </Tabs>
          </div>
        )
      }
    }

Answer 2

У меня недостаточно репутации, чтобы просто комментировать, но я думаю, что проблема просто в том, что компонент <Wrapper /> не существует.Это результат, к которому вы стремитесь?