Question

我有一个使用React创建的相册应用，我有3个主要的js文件：App.js，LeftMenu.js，RightContent.js。 LeftMenu.js包含与网站菜单相关的所有代码，我在其中放置了一个Reset按钮。 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上的按钮名称为“ Reset”，以便在单击该按钮时可以隐藏RightContent.js，以便在页面上仅保留菜单。我曾尝试在此处找到解决方案，但没有任何指示。

Answer 1

您应该将状态从LeftMenu.js移至App.j组件。还将回调函数ResetState（）移至App.js。然后，将回调函数发送给LeftMenu组件作为使用的道具。

这样，您可以在App中设置状态并根据条件逻辑使用状态来渲染RightScreen组件。

隐藏reactjs中的组件

1 个答案: