Javascript 带按钮的显示/隐藏div

我有：

主屏幕：

import React from 'react';
import LeftNavigation from './LeftNavigation';
import DocumentTitle from 'react-document-title';

export default class MainScreen extends React.Component {

    render() {
        return (
            <div className="MainScreen">
                <DocumentTitle title='Main Screen'>
                    <LeftNavigation />
                    <RightPanel />
                </DocumentTitle>
            </div>
        )
    }
}

从“React”导入React；
从“./LeftNavigation”导入LeftNavigation；
从“react document title”导入DocumentTitle；
导出默认类主屏幕扩展React.Component{
render（）{
返回(
)
}
}

左导航：

import React from 'react';
import Tab from './Tab';

export default class LeftNavigation extends React.Component {

    static contextTypes = {
        getStore: React.PropTypes.func.isRequired
    };

    componentWillMount() {
        this.setState({
            active_tab: 'basics'
        })
    }

    onClick(e) {
        this.setState({
            active_tab: e
        })
    }

    render() {
        return (
            <div>
                <div className="tab-container">
                    <Tab onClick={this.onClick.bind(this, 'basics')} name="Basics" icon="basics.png" active={this.state.active_tab == 'basics'}/>
                    <Tab onClick={this.onClick.bind(this, 'rooms')} name="Rooms" icon="room.png" active={this.state.active_tab == 'rooms'}/>
                    <Tab onClick={this.onClick.bind(this, 'documents')} name="Documents" icon="documents.png" active={this.state.active_tab == 'documents'}/>
                    <Tab onClick={this.onClick.bind(this, 'images')} name="Images" icon="images.png" active={this.state.active_tab == 'images'}/>
                    <Tab onClick={this.onClick.bind(this, 'restrictions')} name="Restrictions" icon="restrictions.png" active={this.state.active_tab == 'restrictions'}/>
                    <Tab onClick={this.onClick.bind(this, '3d')} name="3D" icon="house.png" active={this.state.active_tab == '3d'}/>
                    <Tab onClick={this.onClick.bind(this, 'video')} name="Video" icon="video.png" active={this.state.active_tab == 'video'}/>
                </div>
            </div>
        )
    }
}

从“React”导入React；
从“./Tab”导入选项卡；
导出默认类LeftNavigation扩展React.Component{
静态上下文类型={
getStore:React.PropTypes.func.isRequired
};
组件willmount（）{
这是我的国家({
活动_选项卡：“基础”
})
}
onClick（e）{
这是我的国家({
活动选项卡：e
})
}
render（）{
返回(
)
}
}

我希望这些按钮控制RightPanel中divs容器的可见性。如何将活动选项卡状态传递回LeftNavigation，然后再传递到RightPanel

---

对答案进行了一些调整，使其发挥了作用：

import React from 'react';
import Tab from './Tab';

export default class LeftNavigation extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>
                <div className="tab-container">
                    <Tab onClick={this.props.onTabSelected.bind(null, 'basics')} name="Basics" icon="basics.png" active={this.props.activeTab == 'basics'}/>
                    <Tab onClick={this.props.onTabSelected.bind(null, 'rooms')} name="Rooms" icon="room.png" active={this.props.activeTab == 'rooms'}/>
                    <Tab onClick={this.props.onTabSelected.bind(null, 'documents')} name="Documents" icon="documents.png" active={this.props.activeTab == 'documents'}/>
                    <Tab onClick={this.props.onTabSelected.bind(null, 'images')} name="Images" icon="images.png" active={this.props.activeTab == 'images'}/>
                    <Tab onClick={this.props.onTabSelected.bind(null, 'restrictions')} name="Restrictions" icon="restrictions.png" active={this.props.activeTab == 'restrictions'}/>
                    <Tab onClick={this.props.onTabSelected.bind(null, '3d')} name="3D" icon="house.png" active={this.props.activeTab == '3d'}/>
                    <Tab onClick={this.props.onTabSelected.bind(null, 'video')} name="Video" icon="video.png" active={this.props.activeTab == 'video'}/>
                </div>
            </div>
        )
    }
}

import React from 'react';
import LeftNavigation from './LeftNavigation';
import DocumentTitle from 'react-document-title';

export default class MainScreen extends React.Component {

    componentWillMount() {
        this.setState({
            activeTab: 'basics'
        })
    }

    handleTab(tab) {
        this.setState({
            activeTab: tab
        })
    }

    render() {
        return (
            <div className="MainScreen">
                <DocumentTitle title='Main Screen'>
                    <LeftNavigation onTabSelected={this.handleTab.bind(this)} activeTab={this.state.activeTab}/>
                </DocumentTitle>
            </div>
        )
    }
}

从“React”导入React；
从“./Tab”导入选项卡；
导出默认类LeftNavigation扩展React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
)
}
}
从“React”导入React；
从“./LeftNavigation”导入LeftNavigation；
从“react document title”导入DocumentTitle；
导出默认类主屏幕扩展React.Component{
组件willmount（）{
这是我的国家({
activeTab:“基础”
})
}
扶手选项卡（选项卡）{
这是我的国家({
活动选项卡：选项卡
})
}
render（）{
返回(
)
}
}

通常，当你遇到这种情况时，你需要将你的状态提升一两级。在组件树中保持状态尽可能高是一个好的实践

在这种情况下，

MainScreen

负责管理活动选项卡状态并将其传递给其子组件

LeftNavigation

可以通过调用从

main屏幕传递给它的道具来影响活动选项卡状态

export default class MainScreen extends React.Component {

    componentWillMount() {
        this.setState({
            active_tab: 'basics'
        })
    }

    handleTab(tab) {
        this.setState({
            active_tab: tab
        })
    } 

    render() {
        return (
            <div className="MainScreen">
                <DocumentTitle title='Main Screen'>
                    <LeftNavigation onTabSelected={this.handleTab.bind(this)} activeTab={this.state.activeTab} />
                    <RightPanel activeTab={this.state.activeTab} />
                </DocumentTitle>
            </div>
        )
    }
}

export default class LeftNavigation extends React.Component {

    static propTypes = {
        activeTab: PropTypes.string.isRequired,
        handleTab: PropTypes.func.isRequired
    } 

    render() {
        return (
            <div>
                <div className="tab-container">
                    <Tab onClick={this.handleTab.bind(null, 'basics')} name="Basics" icon="basics.png" active={this.props.active_tab == 'basics'}/>
                    <Tab onClick={this.handleTab.bind(null, 'rooms')} name="Rooms" icon="room.png" active={this.props.active_tab == 'rooms'}/>
                    <Tab onClick={this.handleTab.bind(null, 'documents')} name="Documents" icon="documents.png" active={this.props.active_tab == 'documents'}/>
                    <Tab onClick={this.handleTab.bind(null, 'images')} name="Images" icon="images.png" active={this.props.active_tab == 'images'}/>
                    <Tab onClick={this.handleTab.bind(null, 'restrictions')} name="Restrictions" icon="restrictions.png" active={this.props.active_tab == 'restrictions'}/>
                    <Tab onClick={this.handleTab.bind(null, '3d')} name="3D" icon="house.png" active={this.props.active_tab == '3d'}/>
                    <Tab onClick={this.handleTab.bind(null, 'video')} name="Video" icon="video.png" active={this.props.active_tab == 'video'}/>
                </div>
            </div>
        )
    }
}

导出默认类主屏幕扩展React.Component{
组件willmount（）{
这是我的国家({
活动_选项卡：“基础”
})
}
扶手选项卡（选项卡）{
这是我的国家({
活动选项卡：选项卡
})
} 
render（）{
返回(
)
}
}
导出默认类LeftNavigation扩展React.Component{
静态类型={
activeTab:PropTypes.string.isRequired，
handleTab:PropTypes.func.isRequired
} 
render（）{
返回(
)
}
}

通常，当你遇到这种情况时，你需要将你的状态提升一两级。在组件树中保持状态尽可能高是一个好的实践

在这种情况下，

MainScreen

负责管理活动选项卡状态并将其传递给其子组件

LeftNavigation

可以通过调用从

main屏幕传递给它的道具来影响活动选项卡状态

export default class MainScreen extends React.Component {

    componentWillMount() {
        this.setState({
            active_tab: 'basics'
        })
    }

    handleTab(tab) {
        this.setState({
            active_tab: tab
        })
    } 

    render() {
        return (
            <div className="MainScreen">
                <DocumentTitle title='Main Screen'>
                    <LeftNavigation onTabSelected={this.handleTab.bind(this)} activeTab={this.state.activeTab} />
                    <RightPanel activeTab={this.state.activeTab} />
                </DocumentTitle>
            </div>
        )
    }
}

export default class LeftNavigation extends React.Component {

    static propTypes = {
        activeTab: PropTypes.string.isRequired,
        handleTab: PropTypes.func.isRequired
    } 

    render() {
        return (
            <div>
                <div className="tab-container">
                    <Tab onClick={this.handleTab.bind(null, 'basics')} name="Basics" icon="basics.png" active={this.props.active_tab == 'basics'}/>
                    <Tab onClick={this.handleTab.bind(null, 'rooms')} name="Rooms" icon="room.png" active={this.props.active_tab == 'rooms'}/>
                    <Tab onClick={this.handleTab.bind(null, 'documents')} name="Documents" icon="documents.png" active={this.props.active_tab == 'documents'}/>
                    <Tab onClick={this.handleTab.bind(null, 'images')} name="Images" icon="images.png" active={this.props.active_tab == 'images'}/>
                    <Tab onClick={this.handleTab.bind(null, 'restrictions')} name="Restrictions" icon="restrictions.png" active={this.props.active_tab == 'restrictions'}/>
                    <Tab onClick={this.handleTab.bind(null, '3d')} name="3D" icon="house.png" active={this.props.active_tab == '3d'}/>
                    <Tab onClick={this.handleTab.bind(null, 'video')} name="Video" icon="video.png" active={this.props.active_tab == 'video'}/>
                </div>
            </div>
        )
    }
}

导出默认类主屏幕扩展React.Component{
组件willmount（）{
这是我的国家({
活动_选项卡：“基础”
})
}
扶手选项卡（选项卡）{
这是我的国家({
活动选项卡：选项卡
})
} 
render（）{
返回(
)
}
}
导出默认类LeftNavigation扩展React.Component{
静态类型={
activeTab:PropTypes.string.isRequired，
handleTab:PropTypes.func.isRequired
} 
render（）{
返回(
)
}
}

我得到了“未定义PropTypes”我得到了一些更改，谢谢你的帮助。我得到了“未定义PropTypes”我得到了一些更改，谢谢你的帮助。