Question

我需要创建图像上传字段很容易，但是它不起作用。我的代码在下面。我正在处理大型项目。

import React, { Component } from 'react';



export default class commonFormModel extends Component {

    constructor(props) {
        super();
    }


    render() {
        return (
            <div>
                <input type="file" />
                    <input type="submit" value="Upload Image" name="submit"/>
            </div>                                    
            );
    }

}

Answer 1

如果将此组件导入到另一个组件，则必须收到此警告，

Warning: <commonFormModel /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.

在JSX中，小写标签名称被认为是HTML标签。但是，带有点（属性访问器）的小写标记名称不是。

<component />编译为React.createElement('component')（html标记）
<Component />编译为React.createElement(Component)（反应组件）
<obj.component />编译为React.createElement(obj.component)（反应组件）

您必须将类名更改为PascalCase

export default class commonFormModel extends Component { //Incorrect way

export default class CommonFormModel extends Component { //Correct way

最后，您可以像这样使用组件

<CommonFormModel />

注意：如果您的组件没有state，建议您使用functional component。如果您认为将来可能在此组件中使用state，则可以使用constructor，但是请确保在调用super()时将props传递给它像super(props)一样，在您的情况下，您会丢失它。另请参见difference between super() & super(this)。

在反应中不显示图像上传字段

1 个答案: