2
votes

Comment ajouter une nouvelle ligne lorsque je retourne un tableau dans React?

J'avais besoin d'imprimer une chaîne, "données factices".

J'ai donc créé une fonction qui retourne un tableau contenant une chaîne "données factices". J'ai pu imprimer des "données factices de données factices de données factices ...". Cependant, je veux mettre une nouvelle ligne à chaque chaîne. Ensuite, il ressemblera à,

...
données factices
données factices
données factices
...

Comment puis-je le faire?

Exemple d'image du code et du résultat

class Content extends Component {
  dummyDataLoop = () => {
    var rows = [];
    for (let i = 0; i < 10; i++) {
      rows.push("dummy data");
    }
    return rows;
  };

  render() {
    return (
      <article>
        <div>[CONTENT AREA START]</div>
        {this.dummyDataLoop()}
        <div>[CONTENT AREA END]</div>
      </article>
    );
  }
}

javascript reactjs html arrays create-react-app

1 commentaires

Vous devez envelopper chaque ligne dans un élément de niveau bloc ou vous pouvez utiliser un saut de ligne

3 Réponses :

1
votes

Enveloppez la chaîne dans un

 , puis insérez-la dans un tableau. dummyDataLoop = () => [...Array(10)].map(x => <div>dummy data</div>)
  Une autre façon consiste à utiliser   map ()   et répartir l'opérateur pour raccourcir le code. 
 dummyDataLoop = () => {
  var rows = [];
  for (let i = 0; i < 10; i++) {
    rows.push(<div>dummy data</div>);
  }
  return rows;
};

1 commentaires

@MasonYMKoh Heureux de vous aider. Voir aussi la seconde de faire la même chose. En fait, créer un tableau vide et y pousser des éléments n'est pas considéré comme un code propre.

0
votes

Vous pouvez envelopper les données factices avec la balise div avant de les pousser dans un tableau comme celui-ci

dummyDataLoop = () => {
    var rows = [];
    for (let i = 0; i < 10; i++) {
      rows.push(<div>dummy data</div>);   // notice change in this line
    }
    return rows;
};

  render() {
    return (
      <article>
        <div>[CONTENT AREA START]</div>
        {this.dummyDataLoop()}
        <div>[CONTENT AREA END]</div>
      </article>
    );
  }
}

Vous pouvez modifier votre code vers,

<div>dummy data</div>

0 commentaires

0
votes

C'est bien simple. Utilisez map pour parcourir le tableau puis le renvoyer enveloppé dans une balise

class Content extends Component {
  dummyDataLoop = () => {
    var rows = [];
    for (let i = 0; i < 10; i++) {
      rows.push("dummy data");
    }
    return rows;
  };
  render() {
    return (
      <article>
        <div>[CONTENT AREA START]</div>
        {this.dummyDataLoop().map((item, index) => <p key={index}>{item}</p>)}
        <div>[CONTENT AREA END]</div>
      </article>
    );
  }
}

0 commentaires