首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >隐藏reactjs中的组件

隐藏reactjs中的组件
EN

Stack Overflow用户
提问于 2018-12-13 12:26:40
回答 1查看 391关注 0票数 0

我有一个用React创建的专辑应用程序,我有3个主要的js文件: App.js,LeftMenu.js,RightContent.js。LeftMenu.js包含了所有与网站菜单相关的代码,我在那里放了一个重置按钮。该RightContent.js包含所有的材料,专辑,详细资料的专辑。在App.js中,我写了这样的回报:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
render() {

return (
  <div>
  <LeftMenu   />
  <RightContent albumdata = {this.state.albumdata}
                getAlbumData = {this.getAlbumData}
                albumthumbnail = {this.state.albumthumbnail}
                getAlbumThumbnail = {this.getAlbumThumbnail}
  />
  </div>
);

}

在LeftMenu.js中有以下几行:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import React, { Component } from 'react'
import './LeftMenu.css'
import RightContent from './RightContent.js'

class LeftMenu extends Component {
    constructor(props){
        super(props);
    this.state = {
        RCVisible: true
    }
}
    render() {
        function ResetState() {
            this.setState(prevState => ({ RCVisible: !prevState.RCVisible }))
        }
        return (
            <div class="content">
                <div class="logo"></div>
            <a href="#" class="albumbutton">Albums</a>
                <div class="break"></div>
            <a href="#" class="resetbutton" onClick={ResetState}>Reset</a>

            </div>
        );
    }
}
export default LeftMenu;

RightScreen.js是与专辑thingy相关的代码。

问题是,我想有一个在LeftMenu.js上的按钮名称“重置”,以便当它被点击时,RightContent.js将被隐藏,以便在页面上只留下菜单。我试着在这里找到解决方案,但没有给我方向。

EN

回答 1

Stack Overflow用户

发布于 2018-12-13 13:03:33

您应该将状态从LeftMenu.js向上移动到App.j组件。还要将回调函数ResetState()移动到App.js。然后将回调函数作为道具发送给LeftMenu组件以供使用。

这样,您就可以在应用程序中设置状态,并使用条件逻辑根据状态呈现RightScreen组件。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/53761840

复制
相关文章
ReactJS 学习——组件
React 提倡组件化的开发方式,每个组件只关心自己部分的逻辑,使得应用更加容易维护和复用。
李振
2021/11/26
1.1K0
ReactJS 学习——组件2
注意上面代码中的 key,它是一个 string 类型的属性,在创建 lists 元素的时候,你需要添加这个属性,如果不添加会有 warning。
李振
2021/11/26
7060
ReactJS实战之组件通信
这种情况下很简单,就是通过 props 属性传递,在父组件给子组件设置 props,然后子组件就可以通过 props 访问到父组件的数据/方法,这样就搭建起了父子组件间通信的桥梁。
JavaEdge
2021/03/17
4530
elementUI隐藏组件
但下面有一个横着的滚动条,怎么去掉呢?我们可以打开浏览器控制台找到对应的class
阿超
2022/08/16
1.5K0
elementUI隐藏组件
ReactJS实战之组件和Props详解
组件可以将UI切分成一些独立的、可复用的部件,这样就只需专注于构建每一个单独的部件。
JavaEdge
2021/03/14
1K0
初学ReactJS,写了一个RadioButtonList组件
 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>React Demo</title> 5 <meta charset="utf-8" /> 6 </head> 7 <body> 8 <script src="Scripts/react.js"></script> 9 <script src="Scripts/JSXTransformer.js"></script> 10 <div id="container1
蒋金楠
2018/01/15
8780
初学ReactJS,写了一个RadioButtonList组件
reactjs
最近在学习react js,ReactJS是Facebook开发的用于构建用户界面的JAVASCRIPT库,利用其可以实现组件式开发。
用户1394570
2018/08/08
1.3K0
【视频更新】ReactJs-第3节-组件&props
ReactJs的视频课程基本上全部需要重新录制。因为 .createClass()方法现在不再被支持了。
web前端教室
2019/12/17
8440
【视频更新】ReactJs-第3节-组件&props
Figma中可变组件(Component)的一个隐藏小玩法
静电说:Figma中的组件的特点是通过不同的状态来实现组件的变化。这一点与Sketch的Override做法不一样。个人认为,Figma中的组件做法更适合于交互效果进行配合来完成不同状态下的变化效果。
用户5009027
2022/05/23
1.2K0
Figma中可变组件(Component)的一个隐藏小玩法
Hello ReactJS
前言 React学习前先搭好环境,官网的例子看着比较分散。结合webpack就可以体验完整的es6开发流程了。 源码:https://github.com/Ryan-Miao/hello-react-js/releases/tag/0.1 1. 环境搭建 涉及以下几个技术。但从hello world的角度说,目前先不用知道是干嘛的,先用来学习react,后面再去研究各个组件的功能。 Webpack - A module bundler Babel - A Javascript compiler ES6 -
Ryan-Miao
2018/03/13
1.3K0
Hello ReactJS
【视频更新】ReactJs-第3节-组件&amp;props
想加入先行者计划学习的同学,可以看这里,《2018_先行者计划 - 内容介绍(长文慎读)》
web前端教室
2018/08/08
7350
vue中返回顶部封装的组件 滚动一定位置显示隐藏
用两个不同方式写的返回顶部 返回顶部子组件1 <template> <div> <div @click="backtop" class="fh" v-show="isShow">顶部1</div> </div> </template> <script> export default { data() { return { isShow: false, }; }, mounted() { this.listenerFunction();
江一铭
2022/06/16
1.8K0
vue中返回顶部封装的组件 滚动一定位置显示隐藏
【技巧】ionic3中input相关组件隐藏了的ionBlur和ionFocus
ion-searchbar的聚焦和失去焦点事件,看最新文档,是没有这两个关联事件的,如下截图所示:
IT晴天
2018/08/20
4880
在ReactJS体验ES6中的class类
你也可以使用类表达式定义类。但是不同于类表达式,类声明不允许再次声明已经存在的类,否则将会抛出一个类型错误。
JavaEdge
2021/03/15
1.8K0
isomorphic reactjs
web应用从最早静态页面、到php后台框架输出、到mv*为主的SPA、到基于node中层的直出,目前有人提出web的下次改变可能将是基于isomorphic javascript的前后台同构应用。
IMWeb前端团队
2019/12/03
2.8K0
isomorphic reactjs
isomorphic reactjs
isomorphic javascript web应用从最早静态页面、到php后台框架输出、到mv*为主的SPA、到基于node中层的直出,目前有人提出web的下次改变可能将是基于isomorphic
IMWeb前端团队
2017/12/29
1.8K0
isomorphic reactjs
ReactJS简介
1、ReactJS简介 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单。所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具。 2、ReactJS的背景和原理 在Web开发中,我们总需要将变化的数据实时反应到UI上,这时
小胖
2018/06/27
4K0
Web 隐藏技术:几中隐藏 Web 中的元素方法及优缺点
在 Web 开发中出于多种原因,我们需要隐藏元素。 例如,一个按钮应该在移动中可见,而在桌面视口中隐藏。 或者,在移动设备上隐藏但要在桌面上显示的导航元素。 隐藏元素时有三种不同的状态:
前端小智@大迁世界
2020/05/18
5.1K0
Web 隐藏技术:几中隐藏 Web 中的元素方法及优缺点
ReactJS学习(二)
官方一句很简单的话,道出了什么是ReactJS,就是,一个用于构建用户界面的JavaScript框架,是Facebook开发的一款的JS框架。
用户1289394
2023/01/05
4.1K0
ReactJS学习(二)
ReactJS学习(四)
组件是React中最重要也是最核心的概念,一个网页,可以被拆分成一个个的组件, 像这样:
用户1289394
2023/01/06
8140
ReactJS学习(四)

相似问题

Reactjs条件隐藏组件

20

在ReactJS中显示/隐藏组件

23

ReactJS显示/隐藏并行组件

11

油门隐藏/显示组件ReactJs

13

Reactjs显示隐藏多个组件

21
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文