Kann ich react oder CSS verwenden, um auf eine bestimmte Komponente zu zielen, um onclick zu ändern?

Question

Ich versuche eine Navbar zu haben, die, wenn ein Link darauf geklickt wird, die neue Komponente in der Komponente B Box im Bild und nirgendwo sonst auf dem Bildschirm darstellt (alias alles andere bleibt gleich). Benötige ich dafür einen Router oder kann ich das direkt mit React und CSS machen?

Aka I Link klicken, 1 oder 2 Link oder Link 3 und das Ergebnis zeigt sich in Komponentenbox B.

Answer 1

Muss ich reagieren müssen Router für dieses oder kann ich dies mit straight up Reagieren und CSS?

Sie könnten es tun, w/o reagieren-Router durch eine zustandsbehaftete Komponente zu machen, die Links verwendet, um seine path und Auswahl-Komponente ändern auf diesen path machen basiert. Am Ende verwendet react-router React.

handleLinkClick(e, path) { 
    ev.preventDefault() 
    this.setState({path}) 
} 

renderBComponent() { 
    const { path } = this.state; 

    const ComponentToRender = {path1: ComponentB1, path2: ComponentB2, etc} 
    return <ComponentToRender /> 
} 

Aber Sie würden besser nutzen react-router :) das Rad neu erfinden zu vermeiden.