钩子没有在React中渲染

Question

在React中，我尝试使用React Hook。但是挂钩没有在接触组件中渲染

//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

您的代码非常有效。您应该以大写字母开头命名自定义组件<contactUshook>，因此React知道它是自定义组件，而不是HTML标签。

注意：始终使用大写字母启动组件名称。

React以小写字母为DOM标签开始的组件。例如，代表HTML DIV标签，但代表一个组件，需要欢迎在范围内。

所以这将解决您的问题

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;

，如前所述，您的代码不涉及挂钩。您创建了普通组件。

工作样本在这里