Question

我有一个JSX文件（我放了所有，但我认为没有必要）：

Selector.jsx

import React, { Component } from 'react';
import FormControl from '@material-ui/core/FormControl';
import InputLabel from '@material-ui/core/InputLabel';
import MenuItem from '@material-ui/core/MenuItem';
import MuiSelect from '@material-ui/core/Select';
import FormHelperText from '@material-ui/core/FormHelperText';
// import theme from '../theme/theme.scss';
import { withStyles } from '@material-ui/core/styles';

const styles = {
  formControl: {
    margin: 0,
    minWidth: 100,
    // background: theme.cloudColor,
    // borderColor: theme.lightBlueColor,
    boxSizing: 'border-box',
    borderRadius: '4px',
  },
  inputLabel: {
    fontSize: '14px'
  },
  select: {
    height: '48px',
    fontSize: '14px',
    fontFamily: 'CircularStd'
  },
};

class Select extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '',
      error: false,
      helperText: '',
    };
  }
  createOption(key, option = {}) {
    let toggleDisabled = (key===0) ? true : false;
    return (
      <MenuItem key={key} value={option.value} disabled={toggleDisabled}>
        {option.label}
      </MenuItem>
    );
  }

  // handleChange(event) {
  //   this.setState({ value: event.target.value });
  // }

  render() {
    const items = [];
    let { classes, label, onChange, options, className, value, helperText, error, disabled } = this.props;

    if (!Array.isArray(options)) {
      options = [];
    }

    for (let i = 0; i < options.length; i++) {
      items.push(this.createOption(i, options[i]));
    }

    let selectStyle = className + ' ' + classes.formControl;

    return (
      <FormControl variant="outlined" className={selectStyle} error={error} disabled={disabled}>
        <InputLabel className={classes.inputLabel}>{label}</InputLabel>
        <MuiSelect
          value={value}
          className={classes.select}       
          onChange={event => onChange(event)}>
          {items}
        </MuiSelect>
        <FormHelperText>{helperText}</FormHelperText>
      </FormControl>
    );
  }
}

export default withStyles(styles)(Select);

在与此文件相同的文件夹中，有一个JS文件，其中上一个文件被导入：

myFile.js

//other imports
import Selector from './Selector.jsx';

...

render() {

  return(
     <Selector></Selector>
     ...
  )
}

它不起作用并引发此错误：

Failed to compile
./src/components/orderTable/Selector.jsx
  Line 9:1:  Parsing error: Unexpected character ''

   7 | // import theme from '../theme/theme.scss';
   8 | import { withStyles } from '@material-ui/core/styles';
>  9 | 
     | ^
  10 | const styles = {
  11 |   formControl: {
  12 |     margin: 0,
This error occurred during the build time and cannot be dismissed.

有什么想法吗？

Answer 1

在第9、28、46、50、54、58、62、79行的代码中有一些隐藏的字符。如果您在这些行上按键盘上的Backspace键，您将看不到任何内容被删除，但实际上隐藏的字符被清除。我不知道那是什么。但是我删除了所有那些隐藏的字符，并且代码可以正常工作。请检查以下与您的代码完全相同的代码，但那些隐藏字符除外。

import React, { Component } from 'react';
import FormControl from '@material-ui/core/FormControl';
import InputLabel from '@material-ui/core/InputLabel';
import MenuItem from '@material-ui/core/MenuItem';
import MuiSelect from '@material-ui/core/Select';
import FormHelperText from '@material-ui/core/FormHelperText';
// import theme from '../theme/theme.scss';
import { withStyles } from '@material-ui/core/styles';

const styles = {
  formControl: {
    margin: 0,
    minWidth: 100,
    // background: theme.cloudColor,
    // borderColor: theme.lightBlueColor,
    boxSizing: 'border-box',
    borderRadius: '4px',
  },
  inputLabel: {
    fontSize: '14px'
  },
  select: {
    height: '48px',
    fontSize: '14px',
    fontFamily: 'CircularStd'
  },
};

class Select extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '',
      error: false,
      helperText: '',
    };
  }
  createOption(key, option = {}) {
    let toggleDisabled = (key===0) ? true : false;
    return (
      <MenuItem key={key} value={option.value} disabled={toggleDisabled}>
        {option.label}
      </MenuItem>
    );
  }

  // handleChange(event) {
  //   this.setState({ value: event.target.value });
  // }

  render() {
    const items = [];
    let { classes, label, onChange, options, className, value, helperText, error, disabled } = this.props;

    if (!Array.isArray(options)) {
      options = [];
    }

    for (let i = 0; i < options.length; i++) {
      items.push(this.createOption(i, options[i]));
    }

    let selectStyle = className + ' ' + classes.formControl;

    return (
      <FormControl variant="outlined" className={selectStyle} error={error} disabled={disabled}>
        <InputLabel className={classes.inputLabel}>{label}</InputLabel>
        <MuiSelect
          value={value}
          className={classes.select}
          onChange={event => onChange(event)}>
          {items}
        </MuiSelect>
        <FormHelperText>{helperText}</FormHelperText>
      </FormControl>
    );
  }
}

export default withStyles(styles)(Select);

在React中将JSX文件导入JS文件时出现意外字符''

1 个答案: