React.createElement：使用array.map无国籍组件内部时类型无效

Question

我有以下部件：

import React from "react"; 
import { Grid, Form } from "semantic-ui-react"; 

const BasicDetail = ({DetailData}) => { 
    return(
     <div> 
      <Grid.Row> 
       <h3>Basic Details</h3> 
       {DetailData.map((form) => { 
        return (
         <Form.input 
          label={form.label} 
          readOnly={true} 
          defaultValue={form.default} 
          type="text" 
         /> 
        ) 
       })} 
      </Grid.Row> 
     </div> 
    ) 
} 

BasicDetail.propTypes = { 
    DetailData: React.PropTypes.array.isRequired 
}; 

export default BasicDetail; 

我传递它在道具对象的数组，但我得到下面的错误：

warning.js:36 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of BasicDetail .

如果我从组件移除.MAP功能它正确地呈现。

这个错误的原因是什么？

Answer 1

Semantic UI React组件名称以大写字母开头。
使用Form.Input而不是Form.input。