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

我的想法是在 render 中调用 loadArticle 以在组件加载时加载特定文章，如下所示:

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 在我导航到该页面时正确加载。但是……

但是现在当我点击之前工作正常的链接时，我得到了一个错误

Uncaught ReferenceError: loadArticle is not defined

如果我这样做了

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

使用this，然后我得到

Uncaught TypeError: Cannot read property 'loadArticle' of null

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

编辑

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

Answer 1

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

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

现在在任何地方都应该将此函数称为 this.handleClick & this.loadMore。

您可以阅读其他绑定(bind)模式 here .我提到的那个是 4 号。

这是 facebook docs 中的首选方式