web-dev-qa-db-fra.com

Comment afficher les résultats d'une carte dans plusieurs colonnes à l'aide de react

Je pense que j'ai une question simple, mais je ne peux pas trouver de solution pour le faire avec Rea, je voudrais afficher les résultats dans deux colonnes comme:

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

J'ai essayé de vérifier si la longueur du tableau est 0 ou une nouvelle colonne de départ, mais je ne peux pas dessiner un élément div de début sans dessiner l'élément de fin

J'aimerais faire quelque chose comme ça:

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
5
Nestorzin

En supposant que deux colonnes aient col-md-6 classe pour le fractionnement des lignes.

crée un composant sans état myRow

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

crée un tableau pour chaque colonne 

const col1 = [],col2 = [];

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

retourne l'élément React dans le rendu. 

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

Si vous voulez toujours exactement deux colonnes, une option consiste à appeler map deux fois. Une fois pour chaque moitié du tableau:

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

Y aura-t-il toujours 2 colonnes, quel que soit le nombre d'éléments que vous avez? S'il y a 5 éléments, devrait-il s'afficher sous la forme de colonne A -> 1,2,3. col B -> 4,5? Utilisez CSS pour mettre les deux colonnes côte à côte.

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

Il est plus logique de mapper les éléments comme vous le faites habituellement à partir d'un tableau, puis d'utiliser les colonnes CSS pour les afficher comme décrit.

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