雖然是英文版的，但是寫得簡潔明瞭。 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 定義變數就好了。

// 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 也不行。

剛剛入門，歡迎大牛拍磚~~~