Javascript 使用React中的条件在单独的组件中设置元素的样式

在我的react应用程序中，当数组长度达到5时，我想显示一个隐藏的横幅。但看起来我试图在渲染之前获取元素。我得到了一个关于获取未定义元素样式的错误

此函数必须更改banner元素的css并使其可见

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

我只想在满足条件的情况下呈现弹出组件

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 { ...

---

如何使用条件动态更改元素的样式以呈现该元素？

这可能是一个很好的用例，它将允许您拥有一些全局状态，您的组件可以进入这些状态，而无需通过多个组件作为道具传递标题状态

如果您要这样做，您可能会考虑不使用QueRealStor手动更新样式；相反，可以根据全局标题状态选择渲染或不渲染组件

---

您的应用程序将被包装在标记中，然后需要渲染或不渲染横幅的组件可以使用标记检查当前横幅状态。您还可以在BannerContext中存储切换功能，以便应用程序的其他部分（以及banner本身）可以根据需要切换BannerContext。

您正在尝试在创建组件之前访问它。换句话说，在呈现

之前调用

this.showBanner（）

---

一种解决方案是将弹出窗口移动到更高级别的组件

谢谢@hellojeffhall我刚刚查看了上下文，但是对于这个任务来说，这似乎是一个过火的任务，因为只有一个组件需要了解横幅才能呈现它。还有其他方法可以完成同样的任务吗？@ViacheslavNazarenko如果不知道代码是如何构造的，就有点难说了。相对于其他组件，横幅位于何处？某些父组件可能具有一些

isBannerOpen

状态和围绕setState的

toggleBanner

函数，并使用道具将

toggleBanner

传递给需要它的组件，并使用

isBannerOpen

来判断是否渲染横幅。但是如果这涉及到将道具传递到多个级别的组件，那么像上下文API这样的东西是一个好主意——“道具钻取”被认为是不好的做法。将其移动到更高级别的组件会有所帮助。非常感谢。

<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>

.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;
}