如何从我的源中导入 .txt 文件？

IT技术 reactjs
2021-03-28 21:17:38

我尝试导入 .txt 文件以在文本框中显示文本。

我的代码：

import React, { Component } from 'react';
import './LoadMyFile.css';
import myText from './sample.txt';

export default class LoadMyFile extends Component {  
  render() {
    return (
      <div>      
        <button onClick={this.handleClick} className="LoadMyFile" name="button" variant="flat">test string</button>
      </div>
    )
  }  
  handleClick = () => {
    console.log(myText);
  }   
}

但我在控制台中看到：/static/media/sample.f2e86101.txt

这里出了什么问题？

4个回答

我已经解决了我的问题。

  handleClick = () => {

    fetch('/sample.txt')
    .then((r) => r.text())
    .then(text  => {
      console.log(text);
    })  
  }

Tis 链接确实有帮助： Fetch local JSON file from public folder ReactJS

不想使用fetch，因为它让我不得不处理异步响应。我这样解决了我的问题。

  1. 创建了一个单独的 .js 文件并将我的文本分配给一个变量
  2. 导出变量
const mytext = `test
 this is multiline text.
 more text`;

export default mytext ;
  1. 在我的另一个组件中，我导入了文件。
import mytext from './mytextfile.js';
  1. 我现在可以自由地将它分配给一个变量或在我的组件中的任何地方使用它。
 const gotTheText = mytext;
 return (<textarea defaultValue={gotTheText}></textarea>);

您应该改用json文件：

sample.json：

{
  "text": "some sample text"
}

零件：

import { text } from './sample.json';

console.log(text); // "some sample text"
谢谢你的回答，但它是一个 .txt 文件。我没有选择。有没有办法将文本文件转换为 json 文件，或者没有其他方式作为 json 格式？
2021-06-01 21:17:38
加载 json 文件总是比加载简单的文本文件更好吗？如果你想加载一个多行字符串，如反引号之间声明的那样怎么办？在这种情况下使用 json 似乎不如@Edelfix 建议的解决方案方便...... ` multiline multiline multiline `
2021-06-14 21:17:38
您可以在构建过程之前编写一个脚本来自动转换为 json，或者设置一个服务器（它将能够读取文件系统中的任何文件）来为客户端提供服务。
2021-06-15 21:17:38
The.txt 只是一个例子。我正在尝试创建一个应用程序来显示 GEDCOM 文件。我的 GEDCOM 文件一次又一次地更改。我希望在启动时加载和显示文件。所以加载 GEDCOM 文件并将其转换为字符串并显示它。
2021-06-17 21:17:38
你为什么不能将其转换为json？你能解释一下你的用例/情况吗？
2021-06-21 21:17:38

这在实践中效果很好：

import React from 'react';
import textfile from "../assets/NOTES.txt";

function Notes() {
  const [text, setText] = React.useState();
  fetch(textfile)
    .then((response) => response.text())
    .then((textContent) => {
      setText(textContent);
    });
  return text || "Loading...";
}
其它你可能感兴趣的问题
上一篇Axios 拦截器响应令牌刷新 API 已调用，但无论在 refreshToken API 和所有 API 中，获取令牌均已过期 下一篇无法在 React 中使用 FontAwesome 在“节点”上执行“removeChild”