Reactjs 如何使用react将body元素设置为全屏时隐藏其他元素？_Reactjs

Reactjs 如何使用react将body元素设置为全屏时隐藏其他元素？

reactjs

Reactjs 如何使用react将body元素设置为全屏时隐藏其他元素？,reactjs,Reactjs,当body元素设置为全屏时，我想隐藏body元素中的一些元素我想做什么在index.html文件中，我有 <html> <body> <div id="root"></div> <div id="modal"></div> </body> </html> 在主应用程序组件中，我有 return ( <First/>

当body元素设置为全屏时，我想隐藏body元素中的一些元素

我想做什么

在index.html文件中，我有

 <html>
    <body>
        <div id="root"></div>
        <div id="modal"></div>
    </body>
</html>

在主应用程序组件中，我有

return (
    <First/>
    <TopComponent/>
    <Switch>
        <Route>
            <div>
                <div style={{display: 'flex'}>
                    <NavBar/>
                    <div className="content">
                        <Switch>
                            <Route exact path="/" render= 
                            {this.render_items}/>
                        </Switch>
                    </div>
    </Switch>
);

返回(
);

在itemspage组件中，当我单击fullscrenbtn时，它会将body元素设置为全屏

extend default class ItemsPage extends React.Purecomponent (
    open_full_screen = () => {
        let elem = document.findElementsByTagName('body')[0];
        if (elem.requestFullscreen) {
            elem.requestFullscreen();
        }
    }
    render = () => {
        return (
            <button onclick= 
                {this.open_full_screen}>fullscreenbtn</button>
        ) 
    }
}

扩展默认类ItemsPage扩展React.Purecomponent( 打开整个屏幕=（）=>{ 让elem=document.findElementsByTagName（'body'）[0]； if（元素请求全屏）{ 元素请求全屏（）； } } 渲染=（）=>{ 返回( 全屏 ) } } 现在，正如您从上面的itemspage组件中注意到的，它在全屏上设置了body标记中的所有元素

现在的问题是，我不希望某些元素不会像contentdiv之前的组件那样全屏显示

<First/>
    <TopComponent/>
    <Switch>
        <Route>
            <div>
                <div style={{display: 'flex'}>
                    <NavBar/>

我该怎么做。有人能帮我吗？谢谢。

您必须将这些组件的可见性值存储在状态中。例如，您的状态可能如下所示

components :{
        First : "visible",
        "Switch" : "hidden"
      }

您的react JSX可能如下所示：

<First style :`Visibility : ${this.state.component.First}`/>
    <TopComponent/>
    <Switch `Visibility : ${this.state.component.First}`>