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

【问题标题】：React component name must start with capital letter when using hooks使用 hooks 时 React 组件名称必须以大写字母开头
【发布时间】：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;

【问题讨论】：

标签： reactjs react-hooks components lowercase

【解决方案1】：

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

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

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

【讨论】：