React中导入rpsGame组件却提示未使用？是否存在语法错误？

你碰到的'rpsGame' is defined but never used报错，本质是违反了React的组件命名规则：React组件必须以大写字母开头。

当你用小写的<rpsGame />时，React会把它当作原生HTML标签解析，根本不会关联你导入的rpsGame组件，所以ESLint会判定这个导入的变量没被使用。

解决方法很简单，只需两步：

1. 修改导入语句的组件名，首字母大写：

   import RpsGame from './rpsGame'
   

2. 在JSX中使用大写开头的组件：

   <RpsGame />
   

修改后的完整代码：

import React from 'react';
import RpsGame from './rpsGame'

function App() {
  return (
    <RpsGame />
  )
}

export default App;

另外要确保rpsGame.js文件里的组件也是大写开头导出的，比如：

// rpsGame.js
function RpsGame() {
  return (
    <div>猜拳游戏组件内容</div>
  )
}

export default RpsGame;

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