web-dev-qa-db-ja.com

反応を使用して2つ以上の列でマップの結果を表示する方法

私は簡単な質問があると思いますが、reactでこれを行うための解決策を得ることができません。次のような2つの列に結果を表示したいと思います。

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>;
    }
javascriptreactjstypescriptjsx
9
Nestorzin

通常は1つの配列から行うのと同じように、アイテムをマッピングします。それで、上記の質問で説明したように、CSSプロパティ「columns」を使用して表示します。

.container {
  columns: 2 auto;
}
7
Bilal Khoukhi

2つの列を想定すると、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">
                {col1}{col2}
            </div>;
7
RIYAJ KHAN

常に正確に2つの列が必要な場合、1つのオプションはmapを2回呼び出すことです。アレイの半分ごとに1回：

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>
);
2
FuzzyTree

アイテムの数に関係なく、常に2列ありますか？ 5つのアイテムがある場合、それはcol A-> 1,2,3として表示されます。 col B-> 4,5？ CSSを使用して、2つの列を並べて配置します。

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>
  )
}
1
Rebecca Tay