在无状态组件

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;

我在props中传递了一个对象数组，但是我收到以下错误：

  

warning.js：36警告：React.createElement：类型无效 -   期望一个字符串（用于内置组件）或一个类/函数（用于   复合组件）但得到：未定义。你可能忘了出口了   来自其定义的文件中的组件。检查render方法   BasicDetail。

如果从组件中删除.map函数，它会正确呈现。

导致此错误的原因是什么？

Answer 1

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