隐藏reactjs中的组件
隐藏reactjs中的组件
提问于 2018-12-13 20:26:40
我有一个用React创建的专辑应用程序，我有3个主要的js文件: App.js，LeftMenu.js，RightContent.js。LeftMenu.js包含了所有与网站菜单相关的代码，我在那里放了一个重置按钮。该RightContent.js包含所有的材料，专辑，详细资料的专辑。在App.js中，我写了这样的回报：
render() {
return (
<div>
<LeftMenu />
<RightContent albumdata = {this.state.albumdata}
getAlbumData = {this.getAlbumData}
albumthumbnail = {this.state.albumthumbnail}
getAlbumThumbnail = {this.getAlbumThumbnail}
/>
</div>
);}
在LeftMenu.js中有以下几行：
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将被隐藏，以便在页面上只留下菜单。我试着在这里找到解决方案，但没有给我方向。
回答 1
Stack Overflow用户
发布于 2018-12-13 21:03:33
您应该将状态从LeftMenu.js向上移动到App.j组件。还要将回调函数ResetState()移动到App.js。然后将回调函数作为道具发送给LeftMenu组件以供使用。
这样，您就可以在应用程序中设置状态，并使用条件逻辑根据状态呈现RightScreen组件。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53761840
复制相关文章
相似问题
腾讯云开发者
