ReactJS显示的按钮/隐藏DIV

Question

我：

MainScreen：

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

我希望这些按钮来控制的div容器内RightPanel的知名度。我怎样才能将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> 
     ) 
    } 
} 

Answer 1

通常当你遇到这种情况，你需要吊你的状态了一个或两个级别。在组件树中尽可能保持状态是最好的做法。

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

LeftNavigation可以通过调用由MainScreen

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