крючки не рендерится в реакции

Question

В реакции я пытаюсь использовать реагирующие хуки. Я создал один хук, который содержит форму, и я импортирую его в компонент на основе классов и отображаю его там.Но ловушки не рендерится в компоненте контакта

// 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, но представляет компонент и требует, чтобы 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;

И, как уже упоминалось,Ваш код не имеет дело с хуками.Вы создали обычные компоненты.

Рабочий образец здесь