Abstractions all the way down.
ReactJS) Vad är syftet med använda getDerivedStateFromProps Life Cycle API?
@ProgrammeringElev: getDerivedStateFromProps()
anropas när antingen properties från föräldern eller komponentens eget state uppdaterats, och låter dig returnera ett nytt state för underkomponenten baserat på de två värdena. Här är ett mer konkret exempel där föräldrakomponenten styr huruvida texten i ett inputfält ska vara uppercase eller inte, utan getDerivedStateFromProps()
i Child.tsx så skulle inte texten ändra case när inställningen ändras i föräldern:
interface IParentProps {
}
interface IParentState {
uppercase: boolean;
}
export class Parent extends React.Component<IParentProps, IParentState> {
public constructor(props: IParentProps) {
super(props);
this.state = {
uppercase: false,
};
}
private onClickHandler(): void {
this.setState({
uppercase: !this.state.uppercase,
});
}
public render(): React.ReactNode {
return (
<div>
<Child
uppercase={this.state.uppercase}
/>
<label>
<input
type="checkbox"
onClick={() => this.onClickHandler()}
/>
<span>Uppercase</span>
</label>
</div>
);
}
}
interface IChildProps {
uppercase: boolean;
}
interface IChildState {
text: string;
}
export class Child extends React.Component<IChildProps, IChildState> {
public constructor(props: IChildProps) {
super(props);
this.state = {
text: "bäver",
};
}
public static getDerivedStateFromProps(
props: IChildProps,
state: IChildState,
): IChildState | null {
return {
text: props.uppercase ?
state.text.toUpperCase() :
state.text.toLowerCase(),
};
}
private onChangeHandler(e: React.FormEvent<HTMLInputElement>): void {
this.setState({
text: e.currentTarget.value,
});
}
public render(): React.ReactNode {
return (
<input
value={this.state.text}
onChange={(e) => this.onChangeHandler(e)}
/>
);
}
}
Mer information:
https://reactjs.org/blog/2018/06/07/you-probably-dont-need-de...
(Exemplet är skrivet i TypeScript, ett statiskt typat superset av JavaScript som fungerar väldigt väl tillsammans med React. Rekommenderar starkt att arbeta med det istället för JavaScript.)
@ProgrammeringElev: getDerivedStateFromProps()
anropas när antingen properties från föräldern eller komponentens eget state uppdaterats, och låter dig returnera ett nytt state för underkomponenten baserat på de två värdena. Här är ett mer konkret exempel där föräldrakomponenten styr huruvida texten i ett inputfält ska vara uppercase eller inte, utan getDerivedStateFromProps()
i Child.tsx så skulle inte texten ändra case när inställningen ändras i föräldern:
interface IParentProps {
}
interface IParentState {
uppercase: boolean;
}
export class Parent extends React.Component<IParentProps, IParentState> {
public constructor(props: IParentProps) {
super(props);
this.state = {
uppercase: false,
};
}
private onClickHandler(): void {
this.setState({
uppercase: !this.state.uppercase,
});
}
public render(): JSX.Element {
return (
<div>
<Child
uppercase={this.state.uppercase}
/>
<label>
<input
type="checkbox"
onClick={() => this.onClickHandler()}
/>
<span>Uppercase</span>
</label>
</div>
);
}
}
interface IChildProps {
uppercase: boolean;
}
interface IChildState {
text: string;
}
export class Child extends React.Component<IChildProps, IChildState> {
public constructor(props: IChildProps) {
super(props);
this.state = {
text: "bäver",
};
}
public static getDerivedStateFromProps(
props: IChildProps,
state: IChildState,
): IChildState | null {
return {
text: props.uppercase ?
state.text.toUpperCase() :
state.text.toLowerCase(),
};
}
private onChangeHandler(e: React.FormEvent<HTMLInputElement>) {
this.setState({
text: e.currentTarget.value,
});
}
public render(): JSX.Element {
return (
<input
value={this.state.text}
onChange={(e) => this.onChangeHandler(e)}
/>
);
}
}
Mer information:
https://reactjs.org/blog/2018/06/07/you-probably-dont-need-de...
(Exemplet är skrivet i TypeScript, ett statiskt typat superset av JavaScript som fungerar väldigt väl tillsammans med React. Rekommenderar starkt att arbeta med det istället för JavaScript.)
Hej Jag har läst din kod och jag förstår inte riktigt.
Kan man använda interface och generic i javascript ?!?! Jag har aldrig sett sådan kod i stackoverflow/ google
Hej Jag har läst din kod och jag förstår inte riktigt.
Kan man använda interface och generic i javascript ?!?! Jag har aldrig sett sådan kod i stackoverflow/ google
Det är TypeScript, se länken i mitt förra inlägg. Det påverkar inte hur getDerivedStateFromProps()
fungerar eftersom att det är en del av React, men det är lättare att läsa och förstå vad som händer tack vare typdeklarationerna. Här är ett körbart exempel:
https://codepen.io/anon/pen/vagzzx
Abstractions all the way down.
- Idag Apple kan släppa ny Ipad Pro med M4-krets 5
- Igår Intel skyller Raptor Lake-krascher på moderkortstillverkare 31
- Igår TSMC utvecklar enorma kretsar med effekt mätt i kilowatt 11
- Igår Så mycket långsammare blir Intels värstingkretsar med ”Intel Baseline” i BIOS 52
- 26 / 4 Corsair Platform 6: För dig som inte nöjer dig med Ikea-skrivbord 11
- 27 / 4 Stöd för komprimering i fler format på gång till Windows 19
- 27 / 4 Krönika: "Early access" är utstuderad girighet 47
- 27 / 4 Microsoft släpper källkoden till MS‑DOS 4.00 20
- 26 / 4 Ny caps lock-symbol i Windows förbryllar HP-användare 21
- 26 / 4 Därför blockerar Windows 11 24H2 Start‑menyhack 43
- Igår Google nöjda med annonsexperiment: Youtube kan få pausreklam 39
- 27 / 4 Övergivet skadeprogram infekterar miljontals maskiner 20
- 27 / 4 Helgsnack: Är all reklam till ondo? 85
- 26 / 4 NetonNet varnar om läckta kunduppgifter 23
- 26 / 4 Premiär på SweClockers! Månadens drop med gamingskärm hos Elgiganten 74
- Dagens fynd (bara tips, ingen diskussion) — Läs första inlägget först!18430
- Apple kan släppa ny Ipad Pro med M4-krets5
- SFW! Känn doften av nyklippt gräs med Dreame Roboticmower A147
- Wordle på svenska - ordlig.se7861
- S21 Ultra död/svart skärm12
- Sur, Ledsen, Galen?! Skriv av er här!21526
- Plats för lite gubbgnäll9759
- Övergivet skadeprogram infekterar miljontals maskiner20
- Blåskärm och andra krascher18
- Bilder på ditt senaste inköp (2024) [inga produktbilder]549
- Säljes 4070 TI i5 13400f Dator
- Säljes ASUS ROG Strix 3080 10GB White
- Säljes CoD MW3 ps5 inkl lockpick, Noctua NH-U12S AM4, DAC och HDD
- Säljes Elgato Wave 3 mikrofon
- Säljes TC-Helicon GoXLR Mini
- Säljes Komplett dator, 2700x, GTX 1070
- Säljes Vårstädning - i5-6600, GA-H170N-WIFI, 2x8GB DDR4, GTX 760, Noctua NH-U12S, FD Tesla 650W
- Köpes Uppgraderingspaket am4/am5/lga1700, ssd, gpu
- Säljes Flertal sata SSD'er 480GB-2TB
- Säljes Playstation 5 Digital 825gb
- Apple kan släppa ny Ipad Pro med M4-krets5
- Google nöjda med annonsexperiment: Youtube kan få pausreklam39
- Intel skyller Raptor Lake-krascher på moderkortstillverkare31
- TSMC utvecklar enorma kretsar med effekt mätt i kilowatt11
- Så mycket långsammare blir Intels värstingkretsar med ”Intel Baseline” i BIOS52
- Stöd för komprimering i fler format på gång till Windows19
- Krönika: "Early access" är utstuderad girighet47
- Övergivet skadeprogram infekterar miljontals maskiner20
- Helgsnack: Är all reklam till ondo?85
- Microsoft släpper källkoden till MS‑DOS 4.0020
Externa nyheter
Spelnyheter från FZ
- 1 miljon sålda Manor Lords på bara en dag idag
- Escape From Tarkov pudlar angående sitt exklusiva PvE-läge idag
- Dragon’s Dogma 2 har sålt så bra att Capcom betalar ut mer pengar till aktieägarna igår
- Silent Hill 2 – Snart avslöjas släppdatum och till vilka plattformar det släpps igår
- River City Girls 2 gästas av Double Dragon i sommar igår