원본에서 .txt 파일을 가져오려면 어떻게 해야 합니까?

원본에서 .txt 파일을 가져오려면 어떻게 해야 합니까?

텍스트 상자에 텍스트를 표시하기 위해 .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가 표시됩니다.

여기서 무슨 일이 일어나고 있는 거죠?

나는 내 문제를 해결했다.

  handleClick = () => {

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

TIS 링크가 도움이 되었습니다.공용 폴더에서 로컬 JSON 파일을 가져옵니다. ReactJS

비동기 응답을 처리해야 하기 때문에 fetch를 사용하고 싶지 않습니다.나는 내 문제를 이렇게 해결했다.

1. 별도의 .js 파일을 생성하여 변수에 텍스트를 할당했습니다.
2. 변수를 내보냈습니다.

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

export default mytext ;

3. 다른 컴포넌트에서는 파일을 Import 합니다.

import mytext from './mytextfile.js';

4. 이제 변수를 변수에 할당하거나 구성 요소의 모든 위치에서 자유롭게 사용할 수 있습니다.

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

이것은 실제로 잘 기능합니다.

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

대신 파일을 사용해야 합니다.

sample.json:

{
  "text": "some sample text"
}

컴포넌트:

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

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

언급URL : https://stackoverflow.com/questions/50539756/how-to-import-a-txt-file-from-my-source