Javascript 读取文件组件（fs.readFile）

我收到一个错误，说明

fs.readFile

不是函数。关于如何使用

fs.readFile

，我不了解什么

这里的目标是将文件的内容放入一个变量中，并进一步解析该值

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;

从“React”导入React；
常量fs=require（'fs'）
常量ToolTipTextMod=（道具）=>{
设txt=null；
fs.readFile（'../../components/ToolTip/ToolTipText.txt'，（err，data）=>{console.log（data）}）
返回(
{txt}，{props.textId}

);
}
导出默认ToolTipTextMod；

fs是一个Nodejs模块。因此，我建议使用像raw loader这样的包，但为此，您需要有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>

}

import React，{useState，useffect}来自“React”；
从“/test.txt”//您的文件路径
从“Axios”导入Axios；//导入Axios或使用Fetch。
常量ToolTipTextMod=（道具）=>{
const[text，setText]=useState（“”）；
useffect（（）=>{
Axios（txt）.then（res=>setText（res.data））；//这将在数据属性中包含文本
},[])
返回/*代码*/

}

fs是一个Nodejs模块。因此，我建议使用像raw loader这样的包，但为此，您需要有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>

}

import React，{useState，useffect}来自“React”；
从“/test.txt”//您的文件路径
从“Axios”导入Axios；//导入Axios或使用Fetch。
常量ToolTipTextMod=（道具）=>{
const[text，setText]=useState（“”）；
useffect（（）=>{
Axios（txt）.then（res=>setText（res.data））；//这将在数据属性中包含文本
},[])
返回/*代码*/

}

您不能将

node.js

API中的函数与客户端Javascript混合使用，客户端Javascript必须在没有文件的浏览器窗口中运行。无法在浏览器中使用

readFile

。不要在React中使用

fs

：这是一个用于处理文件系统的API，page JS永远无法做到这一点。假设您正在将React代码与webpack捆绑在一起（与其他人一样），在这种情况下，您可以使用webpack加载程序加载数据，例如用于将文件加载为字符串数据的，而JS代码使用

import

/

require

来加载所需的文件，方式与

import

/

require

JS代码完全相同。然后，Webpack将确保一切正常。您可以使用

fetch

加载文本文件。请参阅此处，您不能将

node.js

API中的函数与客户端Javascript混合使用，后者将在没有文件的浏览器窗口中运行。无法在浏览器中使用

readFile

。不要在React中使用

fs

：这是一个用于处理文件系统的API，page JS永远无法做到这一点。假设您正在将React代码与webpack捆绑在一起（与其他人一样），在这种情况下，您可以使用webpack加载程序加载数据，例如用于将文件加载为字符串数据的，而JS代码使用

import

/

require

来加载所需的文件，方式与

import

/

require

JS代码完全相同。然后，Webpack将确保一切正常。您可以使用

fetch

加载文本文件。参考这里，这是一个挑战性的正确方向。我能够记录预期的文本。然而，我在解构axios调用时有点困难。如何将res.data值放入变量？@ChristianCuneo只需创建一个状态并将其放入其中，我已更新了答案：）这显然是朝着正确的方向发展的。我能够记录预期的文本。然而，我在解构axios调用时有点困难。如何将res.data值放入变量？@ChristianCuneo只需创建一个状态并将其放入其中，我已更新了答案：）