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

Question

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

    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;

Answer 1

but presentational components name should start with a lowercase letter

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

When an element type starts with a lowercase letter, it refers to a built-in component like <div> or <span> and results in a string 'div' or 'span' passed to React.createElement. Types that start with a capital letter like <Foo /> compile to React.createElement(Foo) and correspond to a component defined or imported in your JavaScript file.

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

React component name must start with capital letter when using hooks

reactjs

react-hooks

components

lowercase