Composants de commutation dans la réaction js

Question

Je fais une application d'une seule page et je voudrais changer un composant.

Voici une image à quoi ça ressemble:

image of my spa

Si je clique sur le bouton dans le composant 3, je vais mettre l'appareil 3 avec 5. Alors peut-être que le composant 3 est une vue de tous les projets et si je clique sur un projet, je verrai une vue détaillée du projet avec quelques informations. J'ai créé deux composants différents pour cela. Tous les autres composants doivent rester au même endroit.

Voici mon code comment je passe les composants:

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

Je ne sais pas si est la bonne façon de réagir de le faire. J'ai aussi deux fichiers css différents pour les composants 3 et 5. Si je commute les deux composants, j'ai des irritations de nom de classe avec mes css.

Si c'est une meilleure façon de le faire avec les routeurs? Comment réagissez-vous pour le faire?

Merci pour votre aide :)

Answer 1

Tout dépend de vos besoins, si vous avez besoin de rendre à la fois component3 et component5 alors une route ne sera pas beaucoup plus d'une aide.
Si vous n'avez besoin que de rendre l'un d'entre eux, un itinéraire peut être utile.
que pour la syntaxe que je préfère ceci:
this.state.detailVisible && <ProjectDetailView/>

ici est un exemple simple:

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>