IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

React Discussion :

Mettre une condition sur le dernier élément ajouté


Sujet :

React

  1. #1
    Membre régulier
    Homme Profil pro
    Étudiant
    Inscrit en
    novembre 2020
    Messages
    155
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Indre et Loire (Centre)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : novembre 2020
    Messages : 155
    Points : 80
    Points
    80
    Par défaut Mettre une condition sur le dernier élément ajouté
    Bonjour,

    je débute sur ReactJs et je voudrait faire un truc tout simple ( que je peut faire en javascript ) mais
    pas évident sur reactJs pour un débutant.

    Code reactjs : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
     
    class Movie extends React.Component {
        render() {
            const {title, year, synopsis, director, posterUrl, casting} = this.props;
            return (
                <div className = "movie-item">
                    <h2>{title}</h2>
                    <div class="content">
                        <p>{year}</p>
                        <p>{synopsis}</p>
                        <p>{director}</p>
                        <ul>    
                            {posterUrl.map(p =>
                                <Poster 
                                    urls={p}
                                />
                                )
                            } 
                        </ul> 
                        <ul>
                            {casting.map( c => 
                                <Casting actor={c} />
                            )}
                        </ul>
                    </div>
                </div>
            )
        }
    }

    un composant classique et pour le composant Casting:
    Code ReactJs : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
     
    class Casting extends React.Component {
        render() {
            return (
                <li> {this.props.actor} /&nbsp; </li>
            )
        }
    }
     
    export default Casting;

    qui m'affichera tous les acteurs d'un film.
    J'ai au début les imports qui vont bien et tout fonctionne !

    Mais les / qui séparent les acteurs des films: je voudrais que pour le dernier acteur de la liste, il n'y ait pas de / à la fin

    Il faudrait déjà que je sache comment faire un rendu conditionnel avec ReactJS et où.

    Si je pouvais avoir quelques pistes de reflexion et des liens.

    Merci,

    Laurent.

  2. #2
    Responsable LaTeX

    Avatar de -Nikopol-
    Homme Profil pro
    Développeur Web
    Inscrit en
    mai 2013
    Messages
    2 114
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 46
    Localisation : France, Haute Marne (Champagne Ardenne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Enseignement

    Informations forums :
    Inscription : mai 2013
    Messages : 2 114
    Points : 11 163
    Points
    11 163
    Billets dans le blog
    5
    Par défaut
    Bonsoir,
    Si tu débute je te conseille d'oublier react avec des classes (à moins qu'il n'y ait une raison). C'est la vielle méthode, on utilise maintenant les composants fonctionnels (tu peux aussi chercher react hooks dans google).
    Ce qui donnerai un fichier Movie.js (ou movie.jsx) ressemblant à ca.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    import React, {useEffect, useState} from 'react';
    import axios from 'axios';
     
    const Movie = (props) => {
        const [movie, setMovie] = useState([]);
        useEffect(() => {
                axios.get('/path_to_movie_data/')
                    .then(response => response.data)
                    .then(response => {
                        setMovie(response)
                    })
                    .catch(error => console.log(error));
            }, []
        );
        return (<>
            {movie &&
                <div>
                    <h2>{movie.title}</h2>
                    <div className="content">
                        <p>{movie.year}</p>
                        <p>{movie.synopsis}</p>
                        <p>{movie.director}</p>
                        <ul>
                            {movie.posterUrl.map(p =>
                                <img
                                    key={p.id}
                                    alt={""}
                                    src={p.url}
                                />
                            )}
                        </ul>
                        <ul>
                            {movie.casting.map(c =>
                                <li key={c.id}>c.actor</li>
                            )}
                        </ul>
                    </div>
                </div>}
            </>
        )
    };
    export default Movie;
    l'appel à axios n'est peut etre pas utile si tes données sont chargées depuis le composant parent. Dnas ce cas tu les retrouveras dans les props.
    Je ne trouve pas utiles des créer des composant et donc des fichiers pour juste un <li> comme tu le fais pour actors. Tu peux très bien mapper avec le li à l'interieur

    l'affichage conditionnel, tu en as un dans mon exemple : {movie && <div>... la deuxième partie du teste avec le html est tjs vraie et donc cela s'affichera que si la variable movie est definie.
    pour ton affichage du '/', tu peux aussi utiliser un index avec la fonction map : movie.casting.map( (c,i) => ... et faire un test sur le meme principe que précédement : { i===0 && <div>... }

Discussions similaires

  1. [AC-2003] Mettre une condition sur un champ
    Par tarnx dans le forum Requêtes et SQL.
    Réponses: 3
    Dernier message: 28/12/2010, 11h10
  2. Mettre une condition sur une colonne en splitant une partie ?
    Par wormseric dans le forum Langage SQL
    Réponses: 4
    Dernier message: 22/01/2008, 11h57
  3. Réponses: 8
    Dernier message: 16/05/2007, 21h16
  4. Réponses: 3
    Dernier message: 03/05/2007, 11h06
  5. Réponses: 1
    Dernier message: 08/09/2006, 10h31

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo