reactjs - 渲染数组将内容与样式分开答案

【问题标题】：reactjs - render array separating contents from stylesreactjs - 渲染数组将内容与样式分开
【发布时间】：2019-12-11 17:13:49
【问题描述】：

我正在考虑将数据数组重构为每行 4 列的集合。

当前反应沙箱 https://rtcex.csb.app/

所以说内容是这样的

let rowContents = [
    {"id": "col1Id", "type": "label", "contents": "col 1"},
    {"id": "col2Id", "type": "value", "contents": "col 2"},
    {"id": "col3Id", "type": "label", "contents": "col 3"},
    {"id": "col4Id", "type": "value", "contents": "col 4"},
    {"id": "col5Id", "type": "label", "contents": "col 5"},
    {"id": "col6Id", "type": "value", "contents": "col 6"}
];

我目前有一张像这样渲染数据的地图

{
 rowContents.map(function(item, i){
  return (
    <Col key={i} id={item.id} className={"col-md-3 " + item.type}>{item.contents}</Col>
  );
 })
}

——但这只会渲染所有的 col 标记——我想在渲染中添加一个页眉/页脚方面，以便它添加一个 Row 包装器——在每个第 4 个元素处。

例如预期输出

<Row>
    <Col id="col1Id" className="col-md-3 label">col1</Col>
    <Col id="col2Id" className="col-md-3 value">col2</Col>
    <Col id="col3Id" className="col-md-3 label">col3</Col>
    <Col id="col4Id" className="col-md-3 value">col4</Col>
<Row>
<Row>
    <Col id="col5Id" className="col-md-3 label">col5</Col>
    <Col id="col6Id" className="col-md-3 value">col6</Col>
<Row>

【问题讨论】：

rtcex.csb.app - 类似这样的东西 - 但使用引导程序
if(i%4 == 0) { console.log("----new row"); }

标签： javascript reactjs wrapper

【解决方案1】：

您可以使用小帮助功能（使用Array#reduce）：

const r = [{ foo: 1 }, { foo: 2 }, { foo: 3 }, { foo: 4 }, { foo: 5 }, { foo: 6 }];
const getData = (r, splitBy) => r.reduce((s, a) => (s[0].push(a), s[0].length === splitBy ? (s.push(s[0]), s[0] = []) : s, s), [[]]).filter((a) => a.length).reverse();

console.log(getData(r, 4));

然后在里面渲染：

{
  getData(rowContents).map((item, i) => {
    return (
      <Row>
         {item.map((item) => 
           <Col key={i} id={item.id} className={"col-md-3 " + item.type}>
              {item.contents}
           </Col>
         )}
      </Row>
    );
  })
}

但是可能有一些更易读的解决方案，只是想对其进行一些调整。

【讨论】：

这可能有一个错误 - 因为项目的顺序现在看起来不正确 - 无论是孩子还是分组本身
@Rob 你能给我一些例子吗？
-- 我在 getData 中删除了相反的东西
我认为这已经解决了——只是最初的数组——从上到下——开始看起来乱七八糟
@Rob 嗯，afaik 反向功能必须在那里，但如果没有它对你来说也能正常工作，那很好

【解决方案2】：

一种简单的方法是使用辅助函数来拆分所有内容，然后对其进行分组。

注意：该功能可以与其他数量的拆分一起使用，因此您可以更改<Rows/> 中的<Cols/> 的数量

function spliceArrayInGroups(list, howMany) {
  var result = []
  input = list.slice(0)
  while (input[0]) {
    result.push(input.splice(0, howMany))
  }
  return result;
}

const separatedInGroups = spliceArrayInGroups(rowContents, 4);

const result = separatedInGroups.map(function(row, ri) {
  // here you iterate over your grouped items and form your cols.
  const cols = item.map((item, ci) => <Col key={ri+'-'+ci} id={item.id} className={"col-md-3 " + item.type}>{item.contents}</Col>)

  // then you wrap them into a row.
  return <Row key={${ri}}>${cols}<Row>
})

【讨论】：