使用钩子时，React组件名称必须以大写字母开头

编程问答 2022-07-04

问题描述

我正在尝试使用React构建我的网站。 我了解到，以大写字母开头的功能组件是一个好习惯，但是表示性组件的名称应该以小写字母开头。 我尝试遵循此规则，但是当我将任何钩子导入以小写字母开头的表示性组件时，React会说“无法编译”。 这是消息 10:26行：在函数“ newCoring”中调用React Hook“ useContext”，它既不是React函数组件也不是自定义的React Hook函数react-hooks / rules-of-hooks 我知道重命名组件会有所帮助，但是仍然想知道为什么当它不能与React挂钩一起使用时，以这种方式命名演示组件是一种“好习惯”吗？ 这是我的组件：

    import React,{useContext} from 'react'
    import InputComponent from '../Interface Components/InputComponent'
    import SelectComponent from '../Interface Components/SelectComponent'
    import AddToCart from '../Interface Components/AddToCart'
    import DrawButton from '../Interface Components/DrawButton'
    import Signs from '../Interface Components/Signs'
    import Cog from '../Interface Components/Cog'
    import InputContext from '../../context/input-context'
    const newCoring = () => {
        const inputContext = useContext(InputContext);
        return (
        <div className="first-line"> 
            <Signs/>
            <InputComponent id="width" default="500">Width:</InputComponent>
            <InputComponent id="height" default="500">Height:</InputComponent>
            <InputComponent id="depth" default="250">Depth:</InputComponent>
            <SelectComponent id="diameter" default="152" values={inputContext.diameters}>Diameter:</SelectComponent>}
            <Cog/>
            <AddToCart/>
            <DrawButton/>
        </div>
        );
    }
    export default newCoring;

解决方法

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

<component />编译为React.createElement（‘component’）（html标记）

<Component />编译为React.createElement（Component）

<obj.component />编译为React.createElement（obj.component）

,

但外观组件名称应以小写字母开头

不是， User-Defined Components Must Be Capitalized

当元素类型以小写字母开头时，它引用诸如<div>或<span>之类的内置组件，并导致传递字符串'div'或'span'到React.createElement。以大写字母开头的类型（如<Foo />会编译为React.createElement(Foo)，并且与您的JavaScript文件中定义或导入的组件相对应。

componentscomponentslowercasereact-hooksreactjsreactjs