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链接确实有帮助： Fetch local JSON file from public folder ReactJS

Answer 2

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

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

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

export default mytext ;

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

import mytext from './mytextfile.js';

我现在可以自由地将其分配给变量或在组件中的任何位置使用它。

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

Answer 3

这在实践中效果很好：

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 4

我将文本转换为base64，然后将其解码。

const base64textfile ="Asdfsdfsf";
export default base64textfile ;


import { base64decode } from "nodejs-base64";
var decodedText = base64decode(base64textfile);

Answer 5

您应该使用json文件：

has_and_belong_to_many：

ActiveRecord

成分：

sample.json

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

5 个答案: