为何我的React组件generalInput已声明却未被读取？

• 问题根源：React规则要求自定义组件名称必须以大写字母开头。你使用的generalInput是小写开头，会被React判定为原生HTML标签，而非你导入的自定义组件，因此ESLint会提示“已声明但从未被读取”。
• 额外修正：组件接收props时，你原代码的写法是直接接收name参数，实际拿到的是完整props对象，并非单独的name属性，会导致标签内容显示异常，需一并修正。

修正后的App.js代码 #

import GeneralInput from "./generalInput";
import "./styles.css";

export default function App() {
  return (
    <>
      <GeneralInput name="John" />
    </>
  );
}

修正后的generalInput.js代码 #

export default function GeneralInput({ name }) {
  return (
    <>
      <label>{name}</label>
      <input type="text" />
    </>
  );
}

内容的提问来源于stack exchange，提问作者Natsu