ReactJS Anzeigen/Verbergen div mit Knöpfen

Question

ich habe:

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

Ich möchte diese Tasten innerhalb RightPanel die Sichtbarkeit von divs Behälter steuern. Wie kann ich den active_tab-Status zurück zur LeftNavigation und dann in RightPanel übergeben?

---

Einige kleine Änderungen an der Antwort habe es funktioniert:

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

Im Allgemeinen, wenn Sie über diese Situation kommen Sie Ihren Zustand auf eine Ebene oder zwei hissen müssen. Es ist eine gute Übung, den Status im Komponentenbaum so hoch wie möglich zu halten.

In diesem Fall wird MainScreen verantwortlich für die Verwaltung der aktiven Registerkarte Zustand und Übergabe an seine untergeordneten Komponenten.

LeftNavigation können die aktive Registerkarte Zustand beeinflussen, indem sie eine Stütze aufrufen, die von 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> 
     ) 
    } 
}