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

Question

我尝试导入.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

这里出了什么问题？

Answer 1

我已经解决了我的问题.

  handleClick = () => {

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

Tis链接确实有帮助: 从公用文件夹ReactJS获取本地JSON文件

Answer 2

这在实践中效果很好：

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...";
}

Answer 3

您应该改用json文件：

sample.json：

{
  "text": "some sample text"
}

成分：

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

console.log(text); // "some sample text"

Answer 4

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

1. 创建一个单独的.js文件并将我的文本分配给一个变量
2. 导出变量

const mytext = `test
 this is multiline text.
 more text`;

export default mytext ;

3. 在其他组件中，我导入文件。

import mytext from './mytextfile.js';

4. 现在，我可以随意将其分配给变量或在组件中的任何位置使用它。

 const gotTheText = mytext;
 return (<textarea defaultValue={gotTheText}></textarea>);