使用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>
    );
}