Question

我认为我有一个简单的问题，但我无法通过反应获得解决方案，我想在两列中显示结果：

StringVisitor

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

我想做这样的事情：

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

Answer 1

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

创建无状态组件myRow

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

为每个cols创建数组

const col1 = [],col2 = [];

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

返回渲染中的React元素。

return <div className="row">
                {col1}{col2}
            </div>;

Answer 2

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

.container {
  columns: 2 auto;
}

Answer 3

如果您总是想要两列，那么一个选项就是两次调用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>
);

Answer 4

无论您拥有多少件物品，总会有2列吗？如果有5个项目，它应显示为col A - ＆gt; 1,2,3。 col B - ＆gt; 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>
  )
}

Answer 5

您可以使用以下代码。

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>

Answer 6

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

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 alt="example" src={col.collection.image_url} />}
                    >
                        <Meta title={col.collection.title} description={col.collection.description} />
                    </Card>
                </Col>))}
            </Row>
            )

如何使用react显示两列或更多列中的地图结果

6 个答案: