1
votes

Comment créer plusieurs éléments vides en ligne avec React

Quelle est la meilleure façon de créer plusieurs éléments vides en ligne en utilisant React dans le rendu de manière déclarative?

Par exemple, disons que je voulais 8 divs vides, ce qui suit était ma première tentative bien que cela ne fonctionne pas, est existe-t-il un meilleur moyen?

render() {
    return (
        <section>
            {
                new Array(8).map(()=> <div />)
            }
        </section>
    );
}

javascript reactjs

4 commentaires

L'as tu essayé? Crée-t-il vraiment 8 divs?

Array (8) .fill (

)

Ce n'est pas vraiment un problème React, -> Array (8) .map (f => 10) , pensez-vous que cela renvoie un tableau avec 8 éléments avec la valeur 10?,. Malheureusement non, la carte n'itère pas les éléments de tableau vides. mais comme @hindmost a fait remarquer Array (8) .fill (10) , ce serait le cas.

Je ne savais pas que la carte n'itère pas les éléments vides, mais le remplissage le fait.

3 Réponses :

4
votes

J'utiliserais un petit assistant pour cela:

 times(8, i => <div key={i} />)

À utiliser comme:

  const times = (length, fn) => Array.from({ length }, (_, i) => fn(i));

3 commentaires

C'est probablement la façon dont je procéderais normalement, me demandant simplement s'il y avait une méthode en ligne plus concise. Y a-t-il un avantage à cela sur l'utilisation de la réponse de Mike stackoverflow.com/a/55846879/1528308 ?

@alex c'est plus court, plus lisible (imo) et ne se répète qu'une fois (mais cela n'a pas d'importance pour de si petits tableaux). Remplir le tableau juste pour pouvoir l'itérer avec .map n'a que peu de sens pour moi.

Cela semble un peu gênant, je suis d'accord, il manque des clés à vos divs.

2
votes

Vous devez d'abord remplir le tableau:

export default class Example extends React.Component {
    render() {
        return (
            {Array(8).fill(null).map((item, index) => (
                <div key={index}/>
            )}
        )
    }
}

3 commentaires

Vous n'avez même pas besoin de .fill (null) , juste fill () fonctionnera, c'est parce que la carte n'itère pas vide, mais elle itère indéfinie. .

TS attend au moins un argument pour fill, semble que la valeur ne soit pas facultative: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/...

Oui, je dirais que la définition TS est légèrement erronée. Un argument non passé dans JS n'est pas défini, et undefined est une valeur totalement valide pour fill ..

1
votes

Comme on l'a vu, l'option la plus simple est simplement Array (8) .fill (). map (

)

Mais un problème avec ce qui précède est la création d'un tableau pour en créer un autre déployer. Ce n'est pas un problème majeur, mais si vous aimez le JS moderne, les itérateurs sont une bonne solution. Et bien sûr, les itérateurs peuvent être utilisés pour d'autres choses, pas seulement pour des tableaux.

Voici un exemple.

function *range(r, map) {
  for (let l = 0; l < r; l += 1) yield(map ? map(l) : l);
}

const a1 = Array.from(range(3));
const a2 = Array.from(range(3, m => 2 + m * 2));

console.log(a1);
console.log(a2);

//and of course not just arrays
for (const value of range(3)) console.log(value);

0 commentaires