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

Posted 2023-02-23

【中文标题】使用 hooks 时 React 组件名称必须以大写字母开头

【英文标题】：React component name must start with capital letter when using hooks

【发布时间】：2020-12-31 07:26:22

【问题描述】：

我正在尝试使用 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;

【参考方案1】：

但演示组件名称应以小写字母开头

他们不是，User-Defined Components Must Be Capitalized

当元素类型以小写字母开头时，它指代一个内置组件，如<div> 或<span>，并导致将字符串'div' 或'span' 传递给React.createElement。以<Foo /> 之类的大写字母开头的类型编译为React.createElement(Foo)，并对应于您的 javascript 文件中定义或导入的组件。