Matroids Matheplanet Forum Index
Moderiert von Bilbo matph
Matroids Matheplanet Forum Index » Informatik » React - Inhalt der redirected Seiten
Autor
Universität/Hochschule React - Inhalt der redirected Seiten
mathletic
Aktiv Letzter Besuch: in der letzten Woche
Dabei seit: 11.11.2013
Mitteilungen: 1657
  Themenstart: 2022-10-06

Hallo! Ich habe ein Seitenmenu kreiert, wie folgt: \sourceon nJavascript const menu_items = { id: 'menu', title: 'Menu', type: 'group', children: [ { id: 'Option1', title: 'Option 1', type: 'collapse', children: [ { id: 'SubOption1', title: 'Suboption 1', type: 'item', url: '/Option-1/SubOption-1' } ] }, { id: 'Option2', title: 'Option 2', type: 'item', url: '/Option-2' }, { id: 'Option3', title: 'Option 3', type: 'item', url: '/Option-3' }, { id: 'Option4', title: 'Option 4', type: 'item', url: '/Option-4' }, { id: 'Option5', title: 'Option 5', type: 'item', url: '/Option-5' }, { id: 'Profile', title: 'Profile', type: 'item', url: '/Profile' } ] }; export default menu_items; \sourceoff Jetzt will ich die Inhalte der verschiedene neuen Seiten (also die urls die ich oben definiert habe) jetzt hinzufügen, weiss aber nicht genau wie es in react funktioniert. Macht etwas wie folgt? \sourceon Javascript import { lazy } from 'react'; import Loadable from 'ui-component/Loadable'; import MainLayout from 'layout/MainLayout'; const New = Loadable(lazy(() => import('pages/Suboption1'))) const SuboptionRoutes = { path: '/', element: , children: [ { path: '/Option-1/SubOption-1', element: } ] }; export SuboptionRoutes; \sourceoff 🤔


   Profil
Scynja
Aktiv Letzter Besuch: im letzten Monat
Dabei seit: 23.02.2011
Mitteilungen: 553
Wohnort: Deutschland
  Beitrag No.1, eingetragen 2022-10-06

Hallo mathletic, du hast kein Seitenmenü kreiert, sondern eine Variable definiert und exportiert. Lies dir z. B. das hier durch: https://ui.dev/react-router-tutorial Es sieht so aus, als wenn dein Problem dort durchgekaut wird.


   Profil
mathletic
Aktiv Letzter Besuch: in der letzten Woche
Dabei seit: 11.11.2013
Mitteilungen: 1657
  Beitrag No.2, vom Themenstarter, eingetragen 2022-10-07

Ich habe es hinbekommen dass eine neue Seite aufgerufen wird mit ein Inhalt. Was mir jetzt nicht ganz klar ist, wenn man ein DropDown Menu hat wie bekommt man etwas bestimmtes gezeigt wenn z.B. Option 1 gewählt wurde? Also ich habe folgendes DropDown Menu gemacht : \sourceon Javascript import { Select, MenuItem, FormControl, InputLabel } from '@material-ui/core'; import React, { useState } from 'react'; function DDMenu() { const [selected, setSelected] = useState(''); const selectionChangeHandler = (event) => { setSelected(event.target.value); }; return ( Select one of the following options ); } export default DDMenu; \sourceoff Wenn wir z.B. Option 1 wählen sollte der Inhalt von Option 1 auf der Seite kommen. Macht man es in einer anderen js Datei oder in der gleichen mit switch oder so, z.B. wie folgt? \sourceon Javascript switch(value) { case "1": return

One

; case "2": return

Two

; case "3": return

Three

; case "4": return

Four

; } \sourceoff Oder macht einen neuen Link das dann aufgerufen wird und dieser Link enthält den Inhalt? Würde man das etwa wie folgt machen? \sourceon Javascript Option1 \sourceoff 🤔



   Profil
mathletic
Aktiv Letzter Besuch: in der letzten Woche
Dabei seit: 11.11.2013
Mitteilungen: 1657
  Beitrag No.3, vom Themenstarter, eingetragen 2022-10-07

Oder muss ich etwas wie hier machen?


   Profil
mathletic
Aktiv Letzter Besuch: in der letzten Woche
Dabei seit: 11.11.2013
Mitteilungen: 1657
  Beitrag No.4, vom Themenstarter, eingetragen 2022-10-07

Bisher habe ich folgendes geschrieben : \sourceon Javascript import React, { Component } from 'react'; import Select from '@material-ui/core/Select'; export default function GTMSourceNew() { const [age, setAge] = React.useState(''); const handleChange = (event) => { setAge(event.target.value); }; const handleClick = (param) => { ... }; return (
); } \sourceoff Ist das bisher richtig? Wie definiert man aber die Funktion const handleClick = (param) ? Ich habe auch folgendes versucht aber da bekomme ich nichts im Browser: \sourceon Javascript import React, { Component } from 'react'; import Select from '@material-ui/core/Select'; export default function GTMSourceNew() { const [age, setAge] = React.useState(''); const handleChange = (event) => { setAge(event.target.value); }; const handleClick = (event) => { setIsVisible((current) => !current); }; return (
); } \sourceoff Macht man so dass etwas hidden ist und wenn man auf den Button clicked dann wird es visible?



   Profil
Scynja
Aktiv Letzter Besuch: im letzten Monat
Dabei seit: 23.02.2011
Mitteilungen: 553
Wohnort: Deutschland
  Beitrag No.5, eingetragen 2022-10-07

\quoteon(2022-10-07 12:39 - mathletic in Beitrag No. 2) \sourceon Javascript Option1 \sourceoff 🤔 \quoteoff Das ist code aus den 90ern, den man bei SPAs nicht nutzt. Man kann das aber nutzen, um beispielsweise einen Download zu starten. \quoteon(2022-10-07 12:39 - mathletic in Beitrag No. 2) Wenn wir z.B. Option 1 wählen sollte der Inhalt von Option 1 auf der Seite kommen. Macht man es in einer anderen js Datei oder in der gleichen mit switch oder so, z.B. wie folgt? \sourceon Javascript switch(value) { case "1": return

One

; case "2": return

Two

; case "3": return

Three

; case "4": return

Four

; } \sourceoff \quoteoff Das sieht falsch aus. Neue Datei oder gleiche Datei hängt davon ab wie viel man anzeigen möchte und ob man etwas wiederverwenden kann. Das kann man pauschal nicht sagen. Versuche die Dateien kleiner als 200-500 Zeilen zu halten. Ich würde wahrscheinlich eine Variable definieren und diese dann setzen. In der Renderfunktion kann man dann mit \sourceon jsx {this.myVar &&

...

} \sourceoff den Block schreiben. Man kann die Sachen auch auslagern und dann z. B. \sourceon jsx const myButton =

..

return (<>

Headline

{this.myVar && myButton} ) \sourceoff schreiben. \quoteon(2022-10-07 17:22 - mathletic in Beitrag No. 4) Bisher habe ich folgendes geschrieben : \sourceon Javascript import React, { Component } from 'react'; import Select from '@material-ui/core/Select'; export default function GTMSourceNew() { const [age, setAge] = React.useState(''); const handleChange = (event) => { setAge(event.target.value); }; const handleClick = (param) => { ... }; return (
); } \sourceoff Ist das bisher richtig? Wie definiert man aber die Funktion const handleClick = (param) ? \quoteoff Das kommt drauf an. Man kann mit router.push('url') (Doku nachschlagen) arbeiten, man kann eine Variable setzen und bestimmt noch viel mehr. \quoteon(2022-10-07 17:22 - mathletic in Beitrag No. 4) Ich habe auch folgendes versucht aber da bekomme ich nichts im Browser: \sourceon Javascript import React, { Component } from 'react'; import Select from '@material-ui/core/Select'; export default function GTMSourceNew() { const [age, setAge] = React.useState(''); const handleChange = (event) => { setAge(event.target.value); }; const handleClick = (event) => { setIsVisible((current) => !current); }; return (
); } \sourceoff Macht man so dass etwas hidden ist und wenn man auf den Button clicked dann wird es visible? \quoteoff Zunächst einmal ist isVisible in vielen Fällen ein schlechter Name. Ich würde es wahrscheinlich aus dem DOM schmeißen, indem ich es nicht rendere. Aber display: none und visibility haben durchaus ihre Berechtigung. Es kommt auf den UseCase an. handleClick ist ebenfalls ein miserabler Name einer Funktion.



   Profil
mathletic
Aktiv Letzter Besuch: in der letzten Woche
Dabei seit: 11.11.2013
Mitteilungen: 1657
  Beitrag No.6, vom Themenstarter, eingetragen 2022-10-08

\quoteon(2022-10-07 22:01 - Scynja in Beitrag No. 5) Neue Datei oder gleiche Datei hängt davon ab wie viel man anzeigen möchte und ob man etwas wiederverwenden kann. Das kann man pauschal nicht sagen. Versuche die Dateien kleiner als 200-500 Zeilen zu halten. \quoteoff Ich will für jede Option 4 oder 5 Kästchen machen. Was ist in diesem Fall empfehlenswert? Neue Datei oder die gleiche? \quoteon(2022-10-07 22:01 - Scynja in Beitrag No. 5) Ich würde wahrscheinlich eine Variable definieren und diese dann setzen. In der Renderfunktion kann man dann mit \sourceon jsx {this.myVar &&

...

} \sourceoff den Block schreiben. Man kann die Sachen auch auslagern und dann z. B. \sourceon jsx const myButton =

..

return (<>

Headline

{this.myVar && myButton} ) \sourceoff schreiben. \quoteoff Die Renderfunktion ist die Funktion die man dann in jeder Funktion benutzen kann, oder? \quoteon(2022-10-07 22:01 - Scynja in Beitrag No. 5) Das kommt drauf an. Man kann mit router.push('url') (Doku nachschlagen) arbeiten, man kann eine Variable setzen und bestimmt noch viel mehr. \quoteoff Das wäre dann das man in einen anderen URL landet, oder? Was kann man tun um beim gleichen URL zu bleiben? \quoteon(2022-10-07 17:22 - mathletic in Beitrag No. 4) Zunächst einmal ist isVisible in vielen Fällen ein schlechter Name. Ich würde es wahrscheinlich aus dem DOM schmeißen, indem ich es nicht rendere. Aber display: none und visibility haben durchaus ihre Berechtigung. Es kommt auf den UseCase an. handleClick ist ebenfalls ein miserabler Name einer Funktion. \quoteoff Also meinst du es irgendwie wie in diesen Link ?



   Profil
mathletic hat die Antworten auf ihre/seine Frage gesehen.

Wechsel in ein anderes Forum:
 Suchen    
 
All logos and trademarks in this site are property of their respective owner. The comments are property of their posters, all the rest © 2001-2022 by Matroids Matheplanet
This web site was originally made with PHP-Nuke, a former web portal system written in PHP that seems no longer to be maintained nor supported. PHP-Nuke is Free Software released under the GNU/GPL license.
Ich distanziere mich von rechtswidrigen oder anstößigen Inhalten, die sich trotz aufmerksamer Prüfung hinter hier verwendeten Links verbergen mögen.
Lesen Sie die Nutzungsbedingungen, die Distanzierung, die Datenschutzerklärung und das Impressum.
[Seitenanfang]