“项目”未定义react/jsx-no-undef

Question

我导入了 @material-ui/core、@devexpress/dx-react-core @devexpress/dx-react-grid 和其他一些模块，但问题没有解决。我的 App.js 代码：

import Grid from '@material-ui/core/Grid';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <Grid container spacing={2}>
        <Grid item xs={8}>
          <Item>xs=8</Item>
        </Grid>
        <Grid item xs={4}>
          <Item>xs=4</Item>
        </Grid>
        <Grid item xs={4}>
          <Item>xs=4</Item>
        </Grid>
        <Grid item xs={8}>
          <Item>xs=8</Item>
        </Grid>
      </Grid>
    </div>
  );
}
export default App;

Answer 1

问题是为该Grid组件提供的示例有点误导。我刚刚遇到了与该组件完全相同的问题Stack，该组件也遇到了同样的问题。

如果您按原样使用示例代码，它会准确地给出此错误，因为它包含Item元素。这给人的印象是控件中的每个代码片段都需要包装在一个Item元素中。不幸的是，不存在这样的东西（除非你碰巧定义了一个）。

所以解决方案就是排除这些Item元素：

return (
 <div className="App">
  <Grid container spacing={2}>
    <Grid item xs={8}>
      <p>xs=8</p>
    </Grid>
    <Grid item xs={4}>
      <p>xs=4</p>
    </Grid>
    <Grid item xs={4}>
      <p>xs=4</p>
    </Grid>
    <Grid item xs={8}>
      <p>xs=8</p>
    </Grid>
  </Grid>
</div>
);