读取文件组件（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);
  };