Switch-Komponenten in reagieren js

Question

Ich mache eine Singlepage-Anwendung und möchte eine Komponente wechseln. Hier

ist ein Bild, wie es aussieht:

image of my spa

Wenn ich auf die Schaltfläche in der Komponente klicken 3, Ich werde die Komponente 3 mit 5. Vielleicht wie Komponente Schalter 3 ist eine Ansicht, von allen Projekten und wenn ich auf ein Projekt klicke, sehe ich eine Detailansicht des Projekts mit einigen Informationen. Ich habe dafür zwei verschiedene Komponenten erstellt. Alle anderen Komponenten sollten am selben Ort bleiben.

Hier ist mein Code, wie ich die Komponenten wechseln:

this.state.detailVisible 
     ? <ProjectDetailView/> 
    : null 

Ich bin nicht sicher, ob die richtige Reaktion ist so, wie es zu tun. Ich habe auch zwei verschiedene CSS-Dateien für die Komponenten 3 und 5. Wenn ich die beiden Komponenten wechseln, habe ich einige Klassennamen Irritationen mit meinem CSS.

Wenn es ein besserer Weg ist, es mit Routern zu tun? Wie ist der reaktive Weg, es zu tun?

Dank für Ihre Hilfe :)

Answer 1

Es hängt alles von Ihren Bedürfnissen, wenn Sie beide component3 und component5 dann eine Route von einer Hilfe wird nicht viel zu machen brauchen.
Wenn Sie nur eine davon rendern müssen, kann eine Route nützlich sein.
wie für die Syntax i bevorzugen diese:
this.state.detailVisible && <ProjectDetailView/>

hier ist ein einfaches Beispiel:

const components = ["Component1", "Component2", "Component3"]; 
 

 
class Component extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 

 
    this.state = { 
 
     showDetails: false 
 
    }; 
 

 
    this.onComponentClicked = this.onComponentClicked.bind(this); 
 
    } 
 
    onComponentClicked(e) { 
 
    this.setState({ 
 
     showDetails: !this.state.showDetails 
 
    }); 
 
    } 
 

 
    render() { 
 
    const { name } = this.props; 
 
    const { showDetails } = this.state; 
 
    return (
 
     <div> 
 
     <div>Component{name}</div> 
 
     <button onClick={this.onComponentClicked}>Toggle Details</button> 
 
     {showDetails && <ComponentDetails name={name} />} 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
const ComponentDetails = ({ name }) => (
 
    <div> 
 
    <div>Details of component{name}</div> 
 
    </div> 
 
); 
 

 
class App extends React.Component { 
 
    render() { 
 
    return (
 
     <div> 
 
     <h2>Parent</h2> 
 
     {components.map(c => { 
 
      return (
 
      <div> 
 
       <Component name={c} /> 
 
       <hr /> 
 
      </div> 
 
     ); 
 
     })} 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="root"></div>