读取文件组件（fs.readFile）

Question

我收到一个错误，指出这fs.readFile不是一个函数。我不了解如何使用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 这样的包，但为此你需要设置 webpack。所以替代方法是简单地使用 fetch/Axios。例子：&nbsp;import React, {useState,useEffect} from "react";&nbsp;import txt from "./test.txt"; // Your file path&nbsp;&nbsp;import Axios from "axios"; // Import Axios or use Fetch.const ToolTipTextMod = (props) => {const [text,setText] = useState("");useEffect(()=>{&nbsp; &nbsp;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()：&nbsp; const handleReadFile = () => {&nbsp; &nbsp; const reader = new FileReader();&nbsp; &nbsp; reader.onload = (e) => {&nbsp; &nbsp; &nbsp; const fileContents = e.target.result;&nbsp; &nbsp; &nbsp; console.log(fileContents);&nbsp; &nbsp; &nbsp; setText(fileContents);&nbsp; &nbsp; };&nbsp; &nbsp; reader.readAsText(selectedFile);&nbsp; };