Javascript 使用JQuery+；反应

我对网络开发完全陌生，所以请容忍我，哈哈

以下是我尝试做的简要描述：

使用引导程序在HTML中创建一个网页，显示项目列表（以一组复选框、标签等的形式）

结合使用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>  

1
2
3
4
5

我可以用这个代码静态地访问和编辑一组复选框（这些复选框将成为标记）。Ticker只是Ticker对象的一个数组，它们现在被视为字符串：

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

        return null;
    } 

render:function（）{
for（var i=0；i

所以我可以编辑和访问复选框，太棒了！但是我遇到的问题是如何从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 />');
});

$（'#添加复选框'）。单击（函数（）{
var text=$（'#newCheckText'）.val（）；
$（'#cblist'）。追加（'+text+'
'）；
});

但问题是我无法使用引导格式创建元素，复选框没有对齐（它们看起来像下图），并且引导主题没有保留。我尝试使用CSS，但效果不理想。

---

那么，总体来说，如何根据数组的长度确定当前的项目数呢？我真的只是在努力解决HTML和脚本之间的互连问题。谢谢你的阅读

以下方法应该有效：

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

render:function（）{
var tickerGroupItems=this.state.tickers.map（函数（ticker）{
return
{ticker.name}
});
返回(

{tickerGroupItems}

);
} 

与其自己编写所有引导组件，不如提出一个很好的建议：哈哈，我看到了一半。我觉得有点晚了。虽然我们没有编写太多的引导程序，但Pingendo提供了帮助。你能分享state.tickers数组中的内容吗？只是一些文字？渲染函数中的

#stockTicker

是什么？嘿！因此，在state.tickers数组中，它只是一个“ticker”对象数组，可能只有一个字符串作为ticker名称，还有一些其他数据成员。为了简单起见，现在我只是把它当作一个字符串。在渲染函数中，它引用不同的代码。我意识到我应该把这个贴出来。我将更新原始帖子，因为我这里没有足够的字符