讀取文件組件（fs.readFile）

Question

我收到一條錯誤消息，指出fs.readFile不是 function。 我對如何使用fs.readFile什么？

https://www.geeksforgeeks.org/node-js-fs-readfile-method/

這里的目標是將我的文件的內容放入一個變量中並進一步解析該值。

import React from 'react';


const fs = require('fs')

const ToolTipTextMod = (props) => {
    let txt = null;
    fs.readFile('../../components/ToolTip/ToolTipText.txt',(err, data) => {console.log(data)})

    return(
        <p>{txt},{props.textId}</p>

    );
}

export default ToolTipTextMod;

Answer 1

fs 是一個 Nodejs 模塊。 所以我建議使用像 raw-loader 這樣的 package，但為此你需要設置 webpack。

所以替代方法是簡單地使用 fetch/Axios。

例子：

 import React, {useState,useEffect} from "react";
 import txt from "./test.txt"; // Your file path 
 import Axios from "axios"; // Import Axios or use Fetch.


const ToolTipTextMod = (props) => {
const [text,setText] = useState("");

useEffect(()=>{
   Axios(txt).then(res => setText(res.data)); // This will have your text inside data attribute
},[])

return <p>/* code */</p>

}

Answer 2

fs.readFile()用於 NodeJs，對於前端反應，您可以使用FileReader() ：

  const handleReadFile = () => {
    const reader = new FileReader();
    reader.onload = (e) => {
      const fileContents = e.target.result;
      console.log(fileContents);
      setText(fileContents);
    };
    reader.readAsText(selectedFile);
  };