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

虽然是英文版的,但是写得简洁明了。
https://reactjs.org/docs/add-react-to-a-website.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.dataset.commentid, 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.dataset.commentid, 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.dataset.commentid, 10);
  ReactDOM.render(e(LikeButton, { commentID: commentID}), domContainer);
}

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

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值