將 JSX 文件導入 React 中的 JS 文件時出現意外字符 ''

Question

我有一個 JSX 文件（我把它都放了但我認為沒有必要）：

選擇器.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 文件，其中導入了前一個文件：

我的文件.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 行的代碼中有一些隱藏字符。如果您在這些行的鍵盤上按退格鍵，您將看到沒有任何內容被刪除，但實際上隱藏的字符被刪除了擦除。 我不確定那是什么。 但我刪除了所有那些隱藏的字符並且代碼正在運行。 請檢查以下代碼，除了那些隱藏的字符外，這正是您的代碼。

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);