钩子没有在反应中呈现

Question

在 React 中，我尝试使用 React hooks.I 创建了一个包含表单的挂钩，我将其导入到基于 class 的组件中并在那里呈现。但是钩子没有在接触组件中呈现

//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> 以 capital letter 开头，这样 React 知道它是自定义组件而不是 html 标签。

Note: Always start component names with a capital letter.

React treats components starting with lowercase letters as DOM tags. For example, represents an HTML div tag, but represents a component and requires Welcome to be in scope.

所以这会解决你的问题

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

钩子没有在反应中呈现

hooks are not rendering in react

reactjs

react-component

react-hooks