javascript - 带按钮的ReactJS显示/隐藏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>
        )
    }
}

LeftNavigation：

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>
        )
    }
}

我希望这些按钮可以控制RightPanel中divs容器的可见性。如何将active_tab状态传递回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>
        )
    }
}

最佳答案

通常，当您遇到这种情况时，您需要将您的状态提升一个或两个级别。最好在组件树中保持较高的状态。

在这种情况下，MainScreen负责管理活动选项卡的状态并将其传递给其子组件。

LeftNavigation可以通过调用从MainScreen传递给它的prop来影响活动标签状态

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>
        )
    }
}