Les messages obtiennent une valeur d'API de code la {postlist} renvoie les objets mais il renvoie chaque objet dans une nouvelle ligne de la page Web
Je veux tous les résultats (images) dans la même ligne
Quelqu'un peut-il s'il vous plaît aider?
4 Réponses :
posts.map(post,index => {
return (
<div className="" key={this.state.key}>
<div className="containerimager">
<img style={imgb} src={post.authors[index].authorImageURL} />
</div>
<h6 style={{ marginTop:"23px"}} >{post.authors[index].authorName}</h6>
</div>
)
})
) : (
<div className="center">No posts to show</div>
);
Try this
Cette réponse est une sorte d'inutile - ajoutez une explication et des étapes Comment vous avez proposé cette solution ...
De plus, cela ne voudrait même pas compiler ... Posts.Map Les arguments doivent être entourés par des crochets: posts.map ((Post, index) => {...}) .
Vous êtes un objet de mappage au lieu d'une matrice. post.Auteurs sera la carte
Si vous voulez plusieurs éléments de la même ligne, vous pourriez y parvenir avec CSS. Utilisez Affichage: flex (par défaut de flex-direction est ligne qui est ce dont vous avez besoin) sur le wrapper vers postlist . Vous pouvez soit transmettre comme un style que JSX ou ajouter une classe qui spécifie cette propriété
Voici un échantillon Codesandbox J'ai créé à l'aide de votre code.
Si vous essayez d'aligner les utilisateurs horizontalement (de gauche à droite), CSS est la voie à suivre. En particulier, le Pour aligner en cours de mappe a, par défaut, l'affichage
: bloquer style qui le fait occuper sa propre ligne de la page.
div s côte à côte, vous devez appliquer l'application de l'affichage : inline-block style. Dans mon exemple, j'ai utilisé un de style , mais vous voudrez probablement le faire dans CSS directement.
0 commentaires
Ceci est un problème CSS, vous devez utiliser affichage: flex avec flex-direction: ligne sur le parent div, qui fournira le résultat souhaité.
Qu'entendez-vous par
dans une nouvelle ligne ? Si vous parlez de la conception, vous devez changer cela en utilisant CSS et non réagir ni JS (sauf si vous utilisez JSS).