Dans mon application de réaction, j'ai une bannière cachée que je veux afficher, lorsque la longueur du tableau atteint 5. Mais il semble que j'essaie d'obtenir un élément avant qu'il ne soit rendu. J'obtiens l'erreur d'obtenir un style d'élément non défini.

Cette fonction doit changer le css de l'élément de bannière et le rendre visible.

  showBanner() {
            let banner = document.getElementsByClassName('overlay')[0]
            banner.style.cssText = "visibility: visible;opacity: 1;"
        }

Je souhaite rendre mon composant contextuel uniquement si la condition est remplie.

render() {
        if (this.props.awarded) {
            if (this.props.awarded.length === 5) {
                this.showBanner()
                return (
                    <>
                        <h1 id="awardLabel">5 movies</h1>
                        <div id="movieList">
                            {this.props.awarded.map((movie) => {
                                return (
                                    <div className="awardHolder" key={movie.imdbID}>
                                        <div className="awardImgHolder"  >
                                            <img src={movie.Poster} alt={movie.Title}></img>
                                        </div>
                                        <div className="awardMovieInfo">
                                            <p>{movie.Title}</p>
                                            <p>year {movie.Year}</p>
                                        </div>
                                        <div className="withdrawButton" onClick={(e) => this.deleteMovie(e, movie)}> WITHDRAW </div>
                                    </div>
                                )
                            })}
                        </div>
                        <Popup />
                    </>
                )
            } else { ...

Ceci est ma structure de bannière.

<div id="popup1" className="overlay">
                <div className="popup">
                    <h2>Here i am</h2>
                    <a className="close" href="#">&times;</a>
                    <div className="content">
                        <p>Congratulations. You've nominated 5 movies.</p>
                        <button onClick={this.closeBanner}>Try again</button>
                    </div>
                </div>
            </div>

Ceci est mon css pour l'élément banner.

.overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    transition: opacity 500ms;
    visibility: hidden;
    opacity: 0;
}

Comment puis-je modifier dynamiquement les styles d'élément en utilisant des conditions pour rendre cet élément?

1
Viacheslav Nazarenko 15 sept. 2020 à 00:03

2 réponses

Meilleure réponse

Vous essayez d'accéder à votre composant Popup avant sa création. En d'autres termes, this.showBanner() est appelé avant le rendu de <Popup />.

Une solution consiste à déplacer votre popup vers un composant de niveau supérieur

1
Alex Shnyrov 15 sept. 2020 à 02:36

Cela pourrait être un bon cas d'utilisation pour React Context, qui vous permettra d'avoir un état global que vos composants peuvent exploiter sans avoir à passer l'état de la bannière à travers plusieurs composants comme accessoires.

Si vous envisagez de faire cela, vous pouvez envisager de ne pas mettre à jour manuellement le style avec querySelectors; à la place, vous pouvez demander à React de rendre ou de ne pas rendre le composant en fonction de l'état de votre bannière globale.

Votre application sera encapsulée dans des balises , puis le composant qui doit rendre ou non la bannière peut utiliser les balises pour vérifier l'état actuel de la bannière. Vous pouvez également stocker une fonction bascule dans le BannerContext afin que d'autres parties de l'application (et la bannière elle-même) puissent basculer le BannerContext si nécessaire.

0
hellojeffhall 14 sept. 2020 à 22:31