ReactJs开发图片上传功能遇'import/export仅可出现在顶层'语法错误求助

报错原因和解决方法 #

1. 触发语法报错的核心问题 #

你的代码括号嵌套错误，export default App 被包在了App组件的函数作用域内部：
你错误地把App组件需要返回的JSX内容，写在了handleImageSelect事件处理函数的内部，导致App组件的函数体没有正常闭合，后续的export语句出现在了函数内部，不符合ES6模块的语法规则，所以触发了 'import' and 'export' may only appear at the top level 报错。

2. 其他隐含问题 #

• 没有从React中导入useState Hook，后续运行会触发useState is not defined报错
• handleImageSelect是图片选择的事件回调函数，不需要返回JSX，只需要保留状态更新逻辑即可

修正后的完整代码 #

import React, { useState } from 'react';
import './App.css';
import { DateComponent } from './DateComponent';
import ImageUpload from 'image-upload-react'
import 'image-upload-react/dist/index.css'

const App = () => {
  // 导入useState后正常定义状态
  const [imageSrc, setImageSrc] = useState()

  // 事件回调只保留逻辑，不返回JSX
  const handleImageSelect = (e) => {
    setImageSrc(URL.createObjectURL(e.target.files[0]))
  }

  // App组件的返回值放在函数体顶层
  return (
    <div className="form-style-5">
      <fieldset>
        <legend>
          <span className="number">1</span> Form
        </legend>
        <textarea name="field3" placeholder="Description"></textarea>
        <DateComponent/>
      </fieldset>

      <fieldset>
        <legend>
          <span className="number">2</span> File Picker
        </legend>
        <div className="image">
          <ImageUpload
            handleImageSelect={handleImageSelect}
            imageSrc={imageSrc}
            setImageSrc={setImageSrc}
            style={{
              width: 700,
              height: 500,
              background: 'gold'
            }}
          />
        </div>
      </fieldset>
    </div>
  );
};
export default App;

内容的提问来源于stack exchange，提问作者anjum