javascript - 检测 ReactJS 页面更改

Question

我是 ReactJS 的新手，所以一直在一些使用它的网站上进行试验。现在，我正在尝试基于页面 URL 对 API 进行 AJAX 调用。问题是，每当单击链接时，我的代码就会中断，因为它没有检测到页面更改。我当前的方法是监听所有链接上的点击事件，并搭载我在页面加载时看到的两个选择器(pageLoading--loading 和 pageLoading--finished)。有没有更好的方法来检测单页应用程序的页面更改？作为情况引用，因为这些是实验，我无法访问服务器。下面是我当前的代码方法。

//When any link on the page is clicked
document.body.onclick = function(e){
  e = e || event;
  var from = findParent('a',e.target || e.srcElement);
  if (from){
    //check if pageLoading--finished ran then make an AJAX request
    console.log(__reactContent['url']);
  }
}
//find first parent with tagName [tagname]
function findParent(tagname,el){
  if ((el.nodeName || el.tagName).toLowerCase()===tagname.toLowerCase()){
    return el;
  }
  while (el = el.parentNode){
    if ((el.nodeName || el.tagName).toLowerCase()===tagname.toLowerCase()){
      return el;
    }
  }
  return null;
}

Answer 1

尝试使用setState。这样 React 就会注意到页面变化并处理事件。以下是向注释数组添加新注释的快速示例。

addNote = () => {
        this.setState({
            notes: this.state.notes.concat([{
                id: uuid.v4(),
                task: 'new task'
            }])
        })
    }

有关更多信息，请查看 https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html