如何在快遞服務器中使用反應組件

Question

我試圖讓一些人將文件上傳到我的快速后端，但此頁面的表單位於反應組件中。 我如何在我的get函數中使用我的反應組件ConverterSec2 ？

服務器.js：

import ConverterSec2 from "./ihertz_website/src/pages/Converter/ConverterSec2"
const express = require('express')
const app = express();
const port = process.env.PORT || 5000;

//console.log that your server is up and running
app.listen(port, () => console.log('Listening to port 5000'));

//create GET route
app.get('/express_backend', (req, res) => {
    res.sendFile(__dirname + { ConverterSec2 }) //error
});

轉換器Sec2：

import React, { Component } from "react"
import "../Converter/Converter.css"

class ConverterSec2 extends Component {

    render() {
        return (
            <div className="sec2">
               <form method="POST" action="/" encType="multipart/form-data">
                 <input type="file" name="file"/>
                 <input type="submit" value="Upload"/>
              </form>
           </div>    
       )
   }
}

export default ConverterSec2

Answer 1

您需要在 package.json 的末尾添加一個代理，如下所示：

{
  "name": "some name",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "serve": "firebase emulators:start --only hosting,firestore"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "proxy": "http://localhost:5000"
}

然后在組件內的請求中，使用一個包，例如 axios 並執行以下操作：

axios.get('/express_backend')