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