代码之家 › 专栏 › 技术社区 › DanMad

React.js中的Reading.md

markdown xmlhttprequest reactjs javascript

DanMad · 技术社区 · 5 年前

我想 GET 目录 .md 在我的React组件中将文档作为字符串。出于某种原因,我的 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

提前打电话。

0 回复 | 直到 5 年前

Matthias Fischer 5 年前

由于web访问的异步性质,应该使用异步方法。在这种情况下,可以在构造函数中初始化组件的状态,并在收到结果后将其设置为新值。当状态更改时,组件的新渲染将自动完成。

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>
    );
  }
}