React AntD Forms 错误元素类型无效：预期为字符串（对于内置组件）

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