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>
   )
  }
}

我能够毫无问题地从库中导入所有组件，但是当尝试使用表单时，就是这样。

Answer 1

我没有足够的声誉来发表评论，但是我认为问题很简单，就是<Wrapper />组件不存在。这是您要得到的结果吗？

Answer 2

首先，我执行了您的代码，检查了错误，确实返回了现有组件，也许您没有发布它，然后我对其进行了调整，然后就可以运行了。

    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>
        )
      }
    }