Чтение .md в React.js

Question

Я бы хотел GET содержимое документа .md в виде строки в моем React Component. По какой-то причине мой XMLHttpRequest() регистрирует мой файл index.html. Почему следующий код регистрирует мой index.html файл, а не мой my-first-article.md файл?

export default class Article extends React.Component {
  readTextFile = file => {
    var rawFile = new XMLHttpRequest();
    rawFile.open('GET', file, false);
    rawFile.onreadystatechange = function() {
      if (rawFile.readyState === 4) {
        if (rawFile.status === 200 || rawFile.status == 0) {
          var allText = rawFile.responseText;
          console.log(allText);
        }
      }
    };
    rawFile.send(null);
  };

  render() {
    return (
      <article>
        {this.readTextFile('./data/posts/my-first-article.md')}
      </article>
    );
  }
}

Если это полезно, соответствующие файлы в моем каталоге структурированы так:

src/
  article.js
  data/
    posts/
      my-first-article.md

TY заранее.

Answer 1

Из-за асинхронного характера веб-доступа следует использовать асинхронный подход.В этом случае состояние компонентов может быть инициализировано в конструкторе, и после получения результата ему будет присвоено новое значение.При изменении состояния новый рендеринг компонента будет выполнен автоматически.

export default class Article extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      content: null
    }
  }

  componentDidMount() {
    this.readTextFile('./data/posts/my-first-article.md') 
  }

  readTextFile(file) {
    var rawFile = new XMLHttpRequest();
    rawFile.open('GET', file);
    rawFile.onreadystatechange =  () => {
      if (rawFile.readyState === 4) {
        if (rawFile.status === 200 || rawFile.status == 0) {
          var allText = rawFile.responseText;
          this.setState({ content: allText });
        }
      }
    };
    rawFile.send(null);
  };

  render() {
    return (
      <article>
        { this.state.content }
      </article>
    );
  }
}

Answer 2

Этот ответ только применим, если файл .md хранится локально , однако, как я понял позже, он не упоминается явно в вопросе, где хранится файл.Ответ остается без изменений на случай, если кто-то столкнется с аналогичной проблемой, когда файл хранится локально.

React (в соответствии с его создателями) предназначен для создания V (представления) в MVC (модель,view, controller) systems.

Итак, в модели MVC View не должен напрямую взаимодействовать с данными.

Между тем, это именно то, что вы запрашиваете, поскольку файл .mdэто именно данные.

Таким образом, правильный подход - попросить сервер получить для вас локальный файл и отправить его обратно.

Альтернативный подход - разместить где-нибудь, например, .md., на github и получите его прямо оттуда (используя github API в случае GitHub).