React: Uncaught ReferenceError: Autocomplete is not defined 即使导入了 js 库

Question

这些是我的 HTML 页面中的导入：

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://unpkg.com/react-autocomplete@1.8.1/dist/react-autocomplete.js"></script>
<script src="/SiteAssets/papaparse.min.js"></script>

这是我在同一个 HTML 页面中导入的 react 脚本：

<script type="text/babel" src="/SiteAssets/my_script.js"></script>

这是my_script.js:

const buttonRef = React.createRef()
const FileReaderElement = React.createElement;

class FileReader extends React.Component {
  constructor() {
    super();
    this.state = {
      csvfile_url: "http://" + window.location.hostname + "/SiteAssets/mychannel_index.csv"
    };
    this.updateData = this.updateData.bind(this);
    this.mychannel_csv = this.importCSV();
  }

  handleChange = event => {
    this.setState({
      csvfile_url: event.target.files[0]
    });
  };

  importCSV = () => {
    const { csvfile_url } = this.state;
    Papa.parse(csvfile_url, {
      download: true,
      complete: this.updateData,
      header: true
    });
  };

  updateData(result) {
    var data = result.data;
    console.log(data);
  }

  render() {
    console.log(this.state.csvfile_url);
    return (
      <Autocomplete
        getItemValue={(item) => item.label}
        items={[
          { label: 'apple' },
          { label: 'banana' },
          { label: 'pear' }
        ]}
        renderItem={(item, isHighlighted) =>
          <div style={{ background: isHighlighted ? 'lightgray' : 'white' }}>
            {item.label}
          </div>
        }
        value={value}
        onChange={(e) => value = e.target.value}
        onSelect={(val) => value = val}
      />
    );
  }
}

const getSuggestions = value => {
  const inputValue = value.trim().toLowerCase();
  const inputLength = inputValue.length;

  return inputLength === 0 ? [] : languages.filter(lang =>
    lang.name.toLowerCase().slice(0, inputLength) === inputValue
  );
};

// When suggestion is clicked, Autosuggest needs to populate the input
// based on the clicked suggestion. Teach Autosuggest how to calculate the
// input value for every given suggestion.
const getSuggestionValue = suggestion => suggestion.name;

// Use your imagination to render suggestions.
const renderSuggestion = suggestion => (
  <div>
    {suggestion.name}
  </div>
);

const domContainer = document.querySelector('#container');
ReactDOM.render(FileReaderElement(FileReader), domContainer);

但是，即使我正在导入自动完成库，我也会在控制台中收到以下错误：

Uncaught ReferenceError: Autocomplete is not defined
    at FileReader.render (<anonymous>:57:34)
    at finishClassComponent (react-dom.development.js:17295)
    at updateClassComponent (react-dom.development.js:17245)
    at beginWork (react-dom.development.js:18755)
    at HTMLUnknownElement.callCallback (react-dom.development.js:182)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:231)
    at invokeGuardedCallback (react-dom.development.js:286)
    at beginWork$1 (react-dom.development.js:23338)
    at performUnitOfWork (react-dom.development.js:22292)
    at workLoopSync (react-dom.development.js:22265)

为什么导入不起作用？

Answer 1

我打开了 chrome 控制台并输入了 window.Autocomplete，但没有这样的。但是chrome控制台提示确实有一个叫ReactAutocomplete的函数。 因此，请尝试使用 ReactAutocomplete 而不是 Autocomplete