React报react/jsx-no-undef错误'Item' is not defined 引入依赖未解决

错误原因 #

'Item' is not defined 报错的核心是你代码中使用的 <Item> 组件既没有被提前导入，也没有在当前文件中定义，和你已导入的 Material UI Grid、DevExpress 系列模块没有关联：Material UI 本身不提供名为Item的内置组件，官方Grid布局示例中出现的<Item>均为演示用的自定义样例组件，默认不随Grid组件导出。

修复方案 #

你可以选择以下任意一种方式修复：

• 方案1：直接替换<Item>为普通容器标签
  无需额外定义组件，将所有<Item>标签替换为div（或其他你需要的容器标签）即可，示例如下：

  <Grid item xs={8}>
    <div className="grid-item">xs=8</div>
  </Grid>
  

  如需匹配官方示例的视觉效果，可在App.css中添加自定义样式：

  .grid-item {
    padding: 16px;
    border: 1px solid rgba(0, 0, 0, 0.1);
  }
  

• 方案2：在当前文件内定义Item组件
  如果你希望保留<Item>的写法，直接在App.js代码顶部新增组件定义即可，修改后的完整导入部分代码如下：

  import Grid from '@material-ui/core/Grid';
  import logo from './logo.svg';
  import './App.css';
  
  // 新增自定义Item组件
  const Item = ({children}) => (
    <div style={{ padding: '16px', border: '1px solid #eeeeee' }}>
      {children}
    </div>
  )
  
  function App() {
    // 原有业务代码无需修改
  }
  

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