Question

我有以下ReactJS组件：

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

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

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，然后我

未捕获的TypeError：无法读取属性＆＃39; loadArticle＆＃39;为null

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

修改

这不是this question的副本，因为它已被标记。原因很简单。在上面提到的问题中，bind的函数是一个事件处理程序，在我的问题中，一个函数被另一个函数调用。事实上，我的事件处理程序（类似于另一个问题）在没有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＆amp; this.loadMore。

您可以阅读其他约束模式here。我提到过的是第4号。

这也是facebook docs中的首选方式。

在ReactJs中调用另一个函数

articles_list.jsx

修改

1 个答案: