Question

在react中，我试图使用react钩子。我创建了一个包含表单的钩子，然后将其导入基于类的组件中并在那里渲染它。但是挂钩无法在联系人组件中呈现

// contactushook.js

import React from 'react';
const contactUshook = props => {
    return <React.Fragment>
        <form>
            <div>
                <input id="name" type="text" placeholder="enter the     name"></input>
            </div>
            <div>
                <input id="email" type="email" placeholder="enter the email"></input>
            </div>
            <div>
                <input id="message" type="text-area" placeholder="Type message here"></input>
            </div>
            <button type="submit">Submit</button>
        </form>
    </React.Fragment>

}
export default contactUshook;

// contact.js

import React, { Component } from 'react';
import contactUshook from './hooks/contactushook';
class ContactComponent extends Component {

    render() {
        return (
            <div>
                <h4>hook</h4>
                <contactUshook></contactUshook>
            </div>
        );
    }
}

export default ContactComponent;

Answer 1

您的代码运行正常。您应该以capital letter开头的自定义组件<contactUshook>命名，因此React知道它是自定义组件，而不是html标签。

注意：组件名称始终以大写字母开头。

React将以小写字母开头的组件视为DOM标签。例如，代表HTML div标签，但代表组件，并且要求Welcome位于范围内。

所以这可以解决您的问题

import React, { Component } from 'react';
import ContactUshook from './hooks/contactushook';
class ContactComponent extends Component {

    render() {
        return (
            <div>
                <h4>hook</h4>
                <ContactUshook></ContactUshook>
            </div>
        );
    }
}

export default ContactComponent;

并且如上所述，您的代码不处理钩子。您创建了普通组件。

工作示例为here

钩子没有在反应中呈现

1 个答案: