React 入门教程 querySelectorAll() 方法遇到的问题

入门教程 querySelectorAll() 方法遇到的问题"/>

React 入门教程 querySelectorAll() 方法遇到的问题

虽然是英文版的，但是写得简洁明了。
.html
打开页面之后，搜索: Reuse a Component 找到复用组件这一节。
点击这一节中的：Download the full example (2KB zipped)
代码很小，只有两个文件，直接在浏览器打开 index.html 即可看效果。

存在的问题

在浏览器中，并没有看到动态生成的 Like 按钮。
由于这种写法不使用 IDE，没有报错信息，排查 bug 比较难。

问题原因和解决方法

首先获取 querySelectorAll() 方法的返回结果，看看元素个数：

var containerList = document.querySelectorAll('.like_button_container');
var containerNum = containerList.length;
// 用这种方法来查看 log ：创建一个按钮，点击之后显示 log
const domContainer = document.querySelector('.like_button_container');
const commentID = parseInt(domContainer.datasetmentid, 10);
ReactDOM.render(e(LikeButton, { commentID: containerNum}), domContainer);

发现 containerNum = 3 也就是说，找到了所有的元素。

第一个秘密

通过实验发现，querySelectorAll() 和 querySelector() 方法的参数规律：’#like_button_container’ 搜索的是 id，’.like_button_container’ 搜索的是 class。
在这篇教程中，第一个实例使用的是 id，第二个实例使用的是 class。

// 第一个实例使用的是 id
<div id="like_button_container"></div>
// 第二个实例使用的是 class
<div class="like_button_container" data-commentid="1"></div>
<div class="like_button_container" data-commentid="2"></div>
<div class="like_button_container" data-commentid="3"></div>

第二个秘密

既然找到了所有的元素，为什么没有生成 Like 按钮呢？
通过实验发现：实例中的 forEach 这种遍历方式不行，改为 for 循环并且循环体内用 var 定义变量就好了。

// 这种遍历方式不行
// containerList.forEach(domContainer => {
//     // Read the comment ID from a data-* attribute.
//     const commentID = parseInt(domContainer.datasetmentid, 10);
//     ReactDOM.render(
//       e(LikeButton, { commentID: commentID }),
//       domContainer
//     );
//   });// querySelectorAll() 方法得到的是一个 NodeList 这种遍历方式可以 
for (var i=0; i < containerNum; i++){// 用 const 不行，用 var 就好了 var domContainer = containerList[i];var commentID = parseInt(domContainer.datasetmentid, 10);ReactDOM.render(e(LikeButton, { commentID: commentID}), domContainer);
}

在实例给的代码中，把 forEach 中的 const 改为 var 也不行。

刚刚入门，欢迎大牛拍砖~~~