使用JQuery + React使HTML Bootstrap元素動態化？

Question

我是Web開發的新手，所以請忍受我，哈哈。

這是我要做什么的簡短說明：

1. 使用Bootstrap用HTML制作網頁，以顯示項目列表（以一組復選框，標簽等形式）
2. 使用JQuery和React的組合，使這些元素動態化。

現在是我目前正在嘗試實現的要點。 范例清單

<ul class="list-group" id="PortfolioListOfStocks" >
                <li class="list-group-item" id="stockTicker0">1</li>
                <li class="list-group-item" id="stockTicker1">2</li>
                <li class="list-group-item" id="stockTicker2">3</li>
                <li class="list-group-item" id="stockTicker3">4</li>
                <li class="list-group-item" id="stockTicker4">5</li>

            </ul>  

我可以使用此反應代碼靜態訪問和編輯一定數量的這些復選框（將成為自動收錄器）。 Tickers只是Ticker對象的數組，目前僅被視為字符串：

    render: function () {
        for (var i=0; i < this.state.tickers.length; i++) {
            document.getElementById("stockTicker"+i).innerHTML = this.state.tickers[i];
        }

        return null;
    } 

所以我可以編輯和訪問復選框，太好了！ 但是我遇到的問題是如何從0復選框開始，並且僅在需要時添加復選框，而在不需要時根據數組的長度刪除復選框。 因此，當size = 3時，只有3個元素，但是當size = 15時，則為15的可滾動框。

我知道我可以使用JQuery / JS添加復選框，可以很容易地調用它。 看起來像這樣

     $('#addCheckbox').click(function() {
    var text = $('#newCheckText').val();
    $('#cblist').append('<input type="checkbox" id = "changeThis" /> ' + text + '<br />');
});

但是問題是我無法使用Bootstrap格式創建元素，復選框未對齊（它們看上去類似於下圖），並且Bootstrap主題未保留。 我嘗試使用CSS，但對我而言效果不佳。

因此，總的來說，如何根據數組的長度來確定項目的數量？ 我真的只是在努力與HTML和腳本之間的互連。 謝謝閱讀！！

Answer 1

以下應該工作：

render: function () {
    var tickerGroupItems = this.state.tickers.map(function(ticker){
        return <li key={ticker.id} className='list-group-item' id={'stockTicker' + ticker.id}>{ticker.name}</li>
    });
    return(
        <ul className="list-group" id="PortfolioListOfStocks" >
            {tickerGroupItems}
        </ul>
    );
}