javascript - 尝试在我的第一个 react 网站上建立一个基本的搜索栏

Question

我正在尝试建立我的第一个 react 站点 - 最终它将是产品数据库的参数搜索，但现在我正在尝试建立一个简单的搜索栏。我遇到了一个我不明白的错误。

我认为我以某种方式错误地嵌套了样式，但我不知道如何解决它。

我的代码:

import React, { Component } from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; // add
import RaisedButton from 'material-ui/RaisedButton'; // add
import logo from './logo.svg';
import './App.css';

import InputBase from '@material-ui/core/InputBase';
import SearchIcon from '@material-ui/icons/Search';

const useStyles = makeStyles(theme => ({

      search: {
    position: 'relative',
    borderRadius: theme.shape.borderRadius,
    backgroundColor: fade(theme.palette.common.white, 0.15),
    '&:hover': {
      backgroundColor: fade(theme.palette.common.white, 0.25),
    },
    marginLeft: 0,
    width: '100%',
    [theme.breakpoints.up('sm')]: {
      marginLeft: theme.spacing(1),
      width: 'auto',
    },
  },
  searchIcon: {
    padding: theme.spacing(0, 2),
    height: '100%',
    position: 'absolute',
    pointerEvents: 'none',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  }
}),

export default function SearchAppBar() {
  const classes = useStyles();

class App extends Component {
  render() {
    return (

      <MuiThemeProvider>

      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>

      <div className={classes.search}>
            <div className={classes.searchIcon}>
              <SearchIcon />
            </div>
            <InputBase
              placeholder="Search…"
              classes={{
                root: classes.inputRoot,
                input: classes.inputInput,
              }}
              inputProps={{ 'aria-label': 'search' }}
            />
          </div>

        <RaisedButton label="Material UI" />

      </div>

      </MuiThemeProvider>

    );
  }
}

export default App;

当我运行 npm start 时，我在控制台中收到此错误。

  Line 39:1:  Parsing error: Unexpected token

  37 | }),
  38 | 
> 39 | export default function SearchAppBar() {
     | ^
  40 |   const classes = useStyles();
  41 | 
  42 | class App extends Component {

Answer 1

第 37 行我看到了“})”，只需使用“})”或“});”