在 ReactJs 中从另一个调用函数

Question

我有以下 ReactJS 组件：

文章列表.jsx

import React from 'react';
import marked from 'marked';
import './articles_list.css';

export default class ArticlesList extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      articles: null
    }
  }

  componentWillMount() {
    fetch('/articles_all')
    .then(res => res.json())
    .then(json => {
      this.setState({
        articles: json.articles
      });
    });
  }

  handleClick(e) {
    e.preventDefault();
    var elem = e.target;
    var file = elem.getAttribute('data-file').split('.')[0];
    fetch('/article/'+file, {
      headers: {
        'Accept': 'text/markdown'
      }
    })
    .then(res => res.text())
    .then(txt => marked(txt))
    .then(html => document.getElementById('article-text').innerHTML = html)
  }

  render() {

    var teste = []

    if (this.state.articles === null) {
      teste.push(<div id="no-articles" key="1">No articles</div>)
    } else {
      {this.state.articles.forEach( function(element, index) {
        teste.push(<div onClick={this.handleClick} data-file={element.file} className="articles-menu-item" key={index.toString()}>{element.title}</div>);
      }.bind(this))}
    }

    return(
      <div className="articles-list">
        <div className="articles-list-title">
          ARTICLES
        </div>
        <div id="menu-body" className="menu-body">{teste}</div>
      </div>
    );
  }
}

如您所见，它以文章列表的形式获取并创建链接。当这些链接被点击时，相应的文章就会加载到页面的某个区域。

代码运行良好，但现在我需要在单击任何链接之前加载某篇文章。然后我决定handleClick像这样打破里面的代码：

   loadArticle(file) {
     fetch('/article/'+file, {
       headers: {
         'Accept': 'text/markdown'
       }
     })
     .then(res => res.text())
     .then(txt => marked(txt))
     .then(html => document.getElementById('article-text').innerHTML = html)
   }

   handleClick(e) {
    e.preventDefault();
    var elem = e.target;
    var file = elem.getAttribute('data-file').split('.')[0];
    loadArticle(file);
  }

我的想法是在组件加载时调用loadArticleinsiderender加载特定文章，如下所示：

return(
  <div className="articles-list">
    <div className="articles-list-title">
      ARTICLES
    </div>
    <div id="menu-body" className="menu-body">{teste}{this.loadArticle('my_specific_article')}</div>
  </div>
);

my_specific_article当我导航到页面时，它可以正常工作并且现在可以正确加载。但...

但是现在，当我单击以前运行良好的链接时，出现错误

未捕获的 ReferenceError：loadArticle 未定义

如果我这样做

   handleClick(e) {
    e.preventDefault();
    var elem = e.target;
    var file = elem.getAttribute('data-file').split('.')[0];
    this.loadArticle(file);
  }

使用this，然后我得到

未捕获的类型错误：无法读取 null 的属性“loadArticle”

我该如何处理？我知道这是一个上下文问题，但是作为 ReactJS 的新手，我真的不知道如何继续。

编辑

这不是这个问题的重复，因为它被标记。原因很简单。在提到的问题中，要绑定的函数是一个事件处理程序，而在我的问题中，一个函数被另一个函数调用。事实上，我的事件处理程序（类似于另一个问题）在没有 的情况下工作正常bind，那么我们谈论的不是同一件事。

Answer 1

您必须在构造函数中绑定自定义函数。像这样修改你的构造函数。

constructor(props) {
  super(props);
  this.state = {
    articles: null
  }
 this.handleClick = this.handleClick.bind(this);
 this.loadArticle = this.loadArticle.bind(this);
}

现在到处都应该将此函数称为this.handleClick& this.loadMore。

您可以在此处阅读其他绑定模式。我提到的一个是数字 4。

这也是facebook 文档中的首选方式。