React.js中的Reading.md

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

这个答案是 局部 但是,正如我后来理解的那样,在文件存储位置的问题中没有明确提到它。答案保持不变,以防有人在本地存储文件时遇到类似问题。

React(根据其创建者)旨在用于在MVC(模型、视图、控制器)系统中创建V(视图)。

因此,在MVC模型中,视图不应该直接与数据交互。

所以,正确的方法是让服务器为您获取本地文件&把它寄回去。

另一种方法是将.md托管在github上的某个地方,然后直接从那里获取它(使用 github API 如果是GitHub)。