javascript - 如何在react中推送不完整的部分

Question

我的代码迭代一个数组，并连续生成 Reacts 组件。

var row = [];
IconsAndTexts.forEach(function(IconObject) {
  if (IconObject.badge !== 0) {
    rows.push(
      <Col xs sm md lg
        <table key={"1." + IconObject.key}>

        </table>
      </Col>
    );
  }
});

return (rows);

我省略了一些内部工作原理，但它基本上按照描述工作。 我的问题是如何仅将元素的一部分推送到行(例如，我只想首先推送列的开头 <Col> ，然后在经过一些计算后推送结束标记 </Col> ，但是 react 不会让我这样做)。

那么，我该怎么做呢？我可以使用字符串然后推送它们吗？

编辑 - 从我的评论中澄清我想做什么

它不允许我这样做

rows.push(< Col xs sm md lg>);  
rows.push(< table key={"1." + IconObject.key}>);  
rows.push(< /Col>);  

如果我能做到这一点，那将非常有用，因为我可以更自由地动态加载我的元素，在没有这个的情况下操作多个元素会变得更加僵硬和困难。

Answer 1

将表格包裹在 Col 标记中，如下所示并返回。

IconsAndTexts.forEach(function(IconObject) {            
        if (IconObject.badge !== 0) {               
            rows.push(                  
                    <table key={"1." + IconObject.key}>

                    </table>
                );  
        }
    });
return <Col xs sm md lg>{rows}</Col>;