如何使用反应在两列或多列中显示地图的结果

Posted 2023-02-21

【中文标题】如何使用反应在两列或多列中显示地图的结果

【英文标题】：How to show results of a map in two or more columns using react

【发布时间】：2018-07-28 15:26:04

【问题描述】：

我想我有一个简单的问题，但我无法通过 react 找到解决方案，我想在两列中显示结果，例如：

item 1 | item 4
item 2 | item 5
item 3 | item 6

我尝试验证数组长度是否为 0 或新的起始列，但如果不绘制结束 div 元素，我无法绘制起始 div 元素

我想做这样的事情：

render() 

        const secondColumnStart = this.props.result.length / 2;

        return <div className="row">
                this.props.result.map((item, i) => 
                 (i == 0 || i == secondColumnStart) && <div className="col-md-6"> 
                    item.value
                 (i == 0 || i == secondColumnStart) && </div> )
            </div>;
    

【参考方案1】：

我也遇到了类似的问题，我需要将数组的结果显示在卡片的三列中。 为此，我将数组元素分组如下。

arr = ['a','b','c','d',e','f'] --------> arr = [['a','b', 'c'],['d','e','f']]

let modified_collection=[]
if (collection.length>0) 
         modified_collection = collection.reduce( (rows, key, index) => 
            return (index % 3 === 0 ? rows.push([key]) 
              : rows[rows.length-1].push(key)) && rows;
          , []);
        
    

分组后，我将修改后的数组中的元素映射如下。

modified_collection.map((row) =>
            <Row>
                row.map(col => (<Col>
                    <Card
                        hoverable
                        style= width: 240, height : 480 
                        cover=<img  src=col.collection.image_url />
                    >
                        <Meta title=col.collection.title description=col.collection.description />
                    </Card>
                </Col>))
            </Row>
            )

【参考方案2】：

您可以使用以下代码。

const Thingy = props => 
  const gridCols = [[],[]];
  const result = [10,20,30,40,50,60,70];
  
  result.forEach( ( data,i )=>
        const comp = (
            <button value=data>data+" "</button>
        );
        const colNumber = i % 2;
        gridCols[colNumber].push( comp );

     );
        
  return (
      <div className="container">
          <div className="row">
              <div className="col-sm">
                  gridCols[0]
              </div>
              <div className="col-sm">
                  gridCols[1]
              </div>
          </div>
      </div>
    )
;



// Render it
ReactDOM.render(
  <Thingy title="I'm the thingy" />,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="react"></div>

【参考方案3】：

像往常一样从一个数组中映射项目。这样，使用 CSS 属性“列”来显示它们，如上述问题中所述。

.container 
  columns: 2 auto;

【参考方案4】：

假设有两列，有col-md-6 类用于行拆分。

创建无状态组件myRow

const myRow = (index)=>(<div className="col-md-6">index</div>)

为每个列创建数组

const col1 = [],col2 = [];

this.props.result.forEach((item, i) => 
    if(i%===0)
        col1.push(myRow);
    else
        col2.push(myRow);
    

在渲染中返回 React 元素。

return <div className="row">
                col1col2
            </div>;

【讨论】：

这应该是forEach。您将每个项目映射到 undefined 并丢弃结果。

【参考方案5】：

无论您有多少项目，是否总是有 2 列？如果有 5 个项目，是否应该显示为 col A -> 1,2,3。 col B -> 4,5？ 使用 CSS 将两列并排放置。

var halfwayPoint = Math.ceiling(this.props.result.length / 2)
var columnA = this.props.result.splice(0, halfwayPoint)
var columnB = this.props.result.splice(halfwayPoint)

render () 
  return (
    <div className='columnA'>
      columnA.map((item, i) => 
          return (
           <div>item.value</div>
          )
        )
      
    </div> 
    <div className='columnB'>
      columnB.map((item, i) => 
          return (
           <div>item.value</div>
          )
        )
      
    </div>
  )

【讨论】：

我喜欢这种方法，但是当你拼接 0 时，它会改变你的原始值，所以我使用了： const half = Math.floor(explore.length / 2); const col1 = explore.splice(0, half); const col2 = 探索；这给了我 col1 的前半部分值和 col2 剩下的部分。

【参考方案6】：

如果您总是想要两列，那么一种选择是调用map 两次。数组的每一半一次：

const secondColumnStart = Math.floor(this.props.result.length / 2);

return (
    <div className="row">
        <div className="col-md-6">
            this.props.result.slice(0,secondColumnStart).map(item => item.value)
        </div>
        <div className="col-md-6">
            this.props.result.slice(secondColumnStart).map(item => item.value)                
        </div>
    </div>
);