Išspręsta: reaguokite į maršrutizatorių naudodami statinius stilius

Pagrindinė problema, susijusi su statinių stilių naudojimu su React Router, yra ta, kad gali būti sunku sekti skirtingus maršrutus ir su jais susijusius stilius. Naudojant statinius stilius, kiekvienas maršrutas turi turėti savo CSS taisyklių rinkinį, kuris gali greitai tapti nepatogiu ir sunkiai prižiūrimu. Be to, jei stilius naudojamas keliuose maršrutuose, jis turi būti dubliuojamas visuose juose, todėl sunku išlaikyti kodą DRY (nekartokite savęs).

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import styled from 'styled-components';
 
const StyledLink = styled(Link)`
  color: palevioletred;
  font-weight: bold;

  &:hover {
    color: white;
    text-decoration: none;  
  }  
`;

 const App = () => (   <Router>     <div>       <ul>         <li><StyledLink to="/">Home</StyledLink></li>         <li><StyledLink to="/about">About</StyledLink></li>       </ul>       <hr />       <Route exact path="/" component={Home} />       <Route path="/about" component={About} />     </div>   </Router>) ;

 const Home = () => (   <div>     <h2>Home</h2>   </div>) ;

 const About = () => (   <div>     <h2>About</h2>   </div>) ;

 export default App;

1. Pirmoje eilutėje importuojama React biblioteka.
2. Antroji eilutė importuoja BrowserRouter, Route ir Link komponentus iš react-router-dom bibliotekos.
3. Trečioji eilutė importuoja stilizuotą komponentą iš stiliaus komponentų bibliotekos.
4. Ketvirtoje eilutėje sukuriamas „StyledLink“ komponentas, naudojant „Link“ komponentą, importuotą iš „react-router-dom“, ir suteikia jam stilių pagal spalvą: blyškiai raudoną ir šrifto svorį: paryškintą, taip pat užvedimo efektą, kuris pakeičia spalvą į baltą ir pašalina bet kokį tekstą. puošmena užvedus pelės žymeklį.
5. Penktoje eilutėje sukuriamas programos komponentas, kuris pateikia maršrutizatoriaus komponentą, kurio viduje yra du maršruto komponentai (vienas skirtas Namai ir vienas Apie). Taip pat pateikiamas netvarkingas dviejų nuorodų sąrašas (Pagrindinis ir Apie), naudojant StyledLink komponentą, sukurtą 4 eilutėje virš jų, abi atskirtas hr žyma stiliaus tikslais.
6. 8–11 eilutėse sukuriami du funkciniai komponentai, pavadinti „Pagrindinis“ ir „Apie“, kurie pateikia h2 žymas su atitinkamais pavadinimais, kai juos iškviečia atitinkami maršruto komponentai 5 eilutėje virš jų abiejų (Pagrindinis rodo „Pagrindinis“, o „About“ – „Apie“). ).
7. Galiausiai, 12 eilutė eksportuoja programos komponentą, kad prireikus jį būtų galima naudoti kitur mūsų programoje

Statiniai stiliai

„React Router“ statiniai stiliai yra stiliai, taikomi komponentui ir išlieka tokie patys, nepaisant bet kokių komponento būsenos ar rekvizitų pakeitimų. Tai skiriasi nuo dinamiškų stilių, kurie kinta priklausomai nuo komponento būsenos ar rekvizitų. Statiniai stiliai gali būti naudojami norint sukurti nuoseklią programos išvaizdą ir pojūtį, taip pat suteikti kūrėjams paprastą būdą greitai formuoti komponentus, nereikės jų koreguoti rankiniu būdu kiekvieną kartą, kai įvyksta pakeitimų.

stilizuotų komponentų paketas

Stilizuoti komponentai yra populiarus „React Router“ paketas, leidžiantis kūrėjams kurti ir valdyti komponentų lygio stilius savo „React“ programose. Tai yra paprastas būdas parašyti CSS kodą, kuris yra skirtas vienam komponentui, todėl jį lengviau prižiūrėti ir derinti. Stilizuoti komponentai taip pat palengvina stilių bendrinimą keliuose komponentuose, taip pat palaiko temą. Be to, stiliaus komponentai gali būti naudojami su React Router's Link komponentu, leidžiančiu kūrėjams formuoti nuorodas savo programoje.

Kaip naudoti statinius stilius

Statinius stilius galima naudoti „React Router“ naudojant įterptinį stiliaus atributą. Šis atributas leidžia pritaikyti stilių tiesiogiai elementui, nereikalaujant atskiro stiliaus lapo. Norėdami naudoti statinius stilius React Router, turėsite sukurti stiliaus objektą ir perduoti jį kaip argumentą komponento stiliaus rekvizitui. Pavyzdžiui:

const myStyle = {
fono spalva: '#f2f2f2',
šrifto dydis: „20 pikselių“,
spalva: '#000'
};

Susijusios naujienos:

Palikite komentarą