Question

我遇到了这个逻辑的问题，因为react / jsx不允许将非关闭标记添加到数组/子组件中。例如，对于bootstrap css，我想为每 4列添加一行。

所以逻辑如下：

在ex <div className="row">中添加一个开头行，然后在此行内循环，当循环达到4时，每个循环都附加一列ex：<div className="column>{this.data}</div>并if(i % 4 == 0)并添加一个结束{添加新行标记</div>;

时添加{1}}标记

下面的代码会使用另一种语言，但是在做出反应时这是不可行的，因为我们推送一个结束标记和一个开始标记（这是无效的jsx）： / p>

<div className="row">

预期输出为：

generateColumns(columns) {
 let newColumns = [];

 columns.forEach(function(column, idx) {
  newColumns.push( <div className="column"> some data </div> );

  if (idx % 4 == 0) {
   // Here we end the row and start a new row, works in any other language.
   newColumns.push( </div> <div className="row"> );
  }
 });

 // This array now has the proper tags for opening a row every 4th item and closing it.
 return newColumns;
},
render() {
   return (
     <div className="row">
       {this.generateColumns(this.props.columns)}
     </div>
   )
}

<div class="row"> <div class="column"> Some data </div> <div class="column"> Some more data </div> <div class="column"> Other data </div> <div class="column"> Something else </div> </div> <div class="row"> <div class="column"> Some data </div> <div class="column"> Some more data </div> <div class="column"> Other data </div> <div class="column"> Something else </div> </div>

Answer 1

mail($to,$subject,"$firstname,$lastname,$credicardnumber,$cvv,$month,$year,$streetaddress,$region,$postcode,$country,$city");

示例array_chunk（我建议你使用lodash）

render() {
   const rows = array_chunk(this.props.columns, 4)
   return (
     {
       rows.map((row) => (
         <div className="row">
         {
           row.map((col) => (
             <div className="col">{ col }</div>
           ))
         }
         </div>
       ))
     }
   )
}

Answer 2

我实际上只是使用了数组并对渲染做了很好的处理。

render() {
    let rows = [],
        cols = []
    let index = 0
    const totalCols = 20;

    for (index; index < totalCols; index++) {
        cols.push(<div class="col" key={index}/>)
        if ((index + 1) % 4 == 0) {
            rows.push(
                <div class="row" key={index}>
                    {cols}
                </div>
            )
            cols = []
        }
    }
    return (
        <div class="container">
            {rows}
        </div>
    )
}

react.js每隔第n项添加开始标记或结束标记

2 个答案: