Dev Faq
0
votes

Boucler un composant de réactjs à l'intérieur de son composant parent

J'ai ce composant importé qui renvoie une bande de cartes, mais je veux le styler ceci dans une rangée au lieu d'une colonne et il semble que la façon de le faire est de boucler le composant comme un

  • code> puis ajout de CSS mais je ne peux pas sembler faire la boucle du composant correctement.

    Le composant ressemble à celui-ci à l'intérieur de l'élément parent: p> xxx pré>

    J'ai essayé des solutions Telle que: P> 

    var feedContent = <Feed theme={this.state.theme} articles = {this.state.articles} />
///////////////////////
{feedContent.map(item => <Feed key={item} value={item} />)}
    </div>

    • 8 commentaires

    Vous devez appeler la carte sur un tableau, il y a donc une variable qui est une matrice qui spécifie le nombre de cartes à être rendus dans votre code ...?

    Il n'y a pas de montant défini sur la quantité de cartes rendue qu'il est juste ce qui est renvoyé par une série d'appels de repos

    où est-ce que nourrit vient? Est-ce que vous l'importaez d'une bibliothèque ou que vous l'avez implémentée vous-même? Dans le cas de ce dernier, veuillez ajouter une mise en œuvre de la nourriture à votre question.

    Veuillez poster le code pour flux

    Ceci est FEUILLE FEUILLE (accessoires) {RETOUR

    {ProPs.Articles.TotalRésultats> 0? apps.articles.articles.map (Article => ): } ; }

    J'ai pris les chaînes d'URL pour le reste parce que j'allais sur la limite de caractère

    ok afin que les données que vous recevez dans un appel de repos ont un certain format, c'est qu'un tableau ... Vous pouvez donc savoir combien de flux vous êtes revenus de l'appel de repos

    Je ne vois pas si je peux voir la quantité d'aliments que je ne veux pas les limiter, j'utilise simplement une boîte Flex et essaye de faire défiler le débordement sur l'axe X

    4 Réponses :

    -1
    votes

    Avez-vous essayé d'ajouter un nom de classe à la DIV qui est le parent des cartes? Utilisez cette classe pour appliquer un affichage Flex par exemple et voir ce que cela vous donne. Si NewsCard a une largeur fixe de 100% par hasard, vous devrez bien sûr vous adapter à un petit pourcentage / largeur pour répondre à vos besoins.

    1 commentaires

    J'ai essayé cela, mais cela ne fonctionne pas ici, c'est le CSS pour le .blog-carte {affichage: inline-flex; Flex-direction: rangée; Align-item: flex-start; Justify-content: commencer; Justify-items: commencer; Align-Self: Flex-Start; Contenu aligné: flex-start; Marge: 1REM Auto; Box-Shadow: 0 4PX 8PX 0PX RGBA (0, 0, 0, 0.2); Transition: 0.3s; marge-bas: 1,6%; Contexte: RGBA (68, 78, 90, 0,2); hauteur de ligne: 1.0; Font-famille: Sans Serif; Rayon frontalier: 5px; z-index: 0; }

    0
    votes

    Je pense que vous devez changer l'approche.

    Je vous recommanderais de créer un composant article, exemple: xxx

    après cela, vous pouvez utiliser les articles. Array pour montrer à chacun: xxx

    de cette façon, vous pouvez styliser le composant d'articles que vous le souhaitez.

    1 commentaires

    C'est une bonne idée, mais je ne pense pas que je puisse faire ce nouveau composant seul, il s'agit d'un projet de collaboration et de a été fait par mon collègue

    1
    votes

    La carte est une méthode de tableau intégrée utilisée un tas de réaction. Vous devez l'utiliser sur un tableau ou sinon vous lancerez une erreur. Je suppose que la valeur des articles est une matrice ici: xxx pré>

    Vous pouvez également créer un composant LI, peut-être appelé feeditem, l'importer et la mapper avec la valeur de chaque élément de l'article Array. P> 

    // render method for Feed Component
render = () => {
  return(
    <ul className="someClass">
      {this.state.articles.map((item, index) => <FeedItem key={index} value={item} />)}
    </ul>
  );
}

// FeedItem component
const FeedItem = ({value}) => {
  return(
    <li className="someOtherClass">{value}</li>
  );
}

    2 commentaires

    J'essaie toujours d'intégrer votre solution à mon code, pensez-vous qu'il existe de toute façon une boucle telle qu'elle est vue dans le composant parent?

    Si vous utilisez ce qui suit comme enfant de votre

    '> DOM ELEMENT (à partir de votre premier snipped): {CODE .Articles.map ((élément, index) => )}

    0
    votes

    J'ai pu le comprendre avec de simples CSS le croire ou non. Fondamentalement a été enveloppé dans une DIV dans le composant parent et ne répondait pas au code FLEXBOX CSS, toutefois, après avoir utilisé le nom de classe de la DIV qui enveloppait le composant à l'intérieur de son < Code>

    dans son propre fichier, le div a répondu à CSS! Merci beaucoup pour votre aide tout le monde, je l'apprécie!
    0 commentaires

    Articles qui pourrait vous intéresser :

    Impossible d'importer le module "@ angular / material"
    Interaction profonde avec break and catch
    Utilisation de node.js comment renommer tous les fichiers d'un dossier
    Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO