Solvita: reagi enkursigilon uzante statikajn stilojn

La ĉefa problemo rilata al uzado de senmovaj stiloj kun React Router estas, ke povas esti malfacile konservi trakon de la malsamaj itineroj kaj iliaj rilataj stiloj. Kun senmovaj stiloj, ĉiu itinero devas havi sian propran aron de CSS-reguloj, kiuj povas rapide fariĝi neoporteblaj kaj malfacile konserveblaj. Aldone, se stilo estas uzata en pluraj itineroj, ĝi devas esti duobligita tra ĉiuj el ili, malfaciligante konservi la kodon DRY (Ne Ripetu Vin).

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. La unua linio importas la React-bibliotekon.
2. La dua linio importas la komponantojn BrowserRouter, Route kaj Link el la biblioteko react-router-dom.
3. La tria linio importas la stilitan komponanton el stilaj komponantoj biblioteko.
4. La kvara linio kreas StyledLink-komponenton uzante la Link-komponenton importitan de react-router-dom kaj stiligas ĝin per koloro: palevioletred kaj font-weight: grasa, same kiel ŝveba efiko kiu ŝanĝas sian koloron al blanka kaj forigas ajnan tekston. dekoracio kiam ŝvebas super.
5. La kvina linio kreas App-komponenton, kiu prezentas Router-komponenton kun du Itineraj komponentoj ene de ĝi (unu por Hejmo kaj unu por Pri). Ĝi ankaŭ prezentas neordigitan liston de du ligiloj (Hejmo kaj Pri) uzante la StyledLink-komponenton kreitan en Linio 4 super ili ambaŭ apartigitaj per hr-etikedo por stilaj celoj.
6. Linioj 8 – 11 kreu du funkciajn komponantojn nomitajn Hejme kaj Pri tio bildigas h2-etikedojn kun siaj respektivaj nomoj ene de ili kiam alvokitaj de iliaj respektivaj Itineraj komponentoj en Linio 5 super ili ambaŭ (Hejmo bildigas "Hejme" dum Pri bildigas "Pri" ).
7. Fine, Linio 12 eksportas la App-komponenton, por ke ĝi estu uzata aliloke en nia aplikaĵo se necese.

Statikaj Stiloj

Senmovaj stiloj en React Router estas stiloj kiuj estas aplikitaj al komponento kaj restas la samaj sendepende de iuj ŝanĝoj al la stato aŭ apogiloj de la komponento. Tio estas kontraste al dinamikaj stiloj, kiuj ŝanĝiĝas dependi de la stato aŭ apogiloj de komponento. Senmovaj stiloj povas esti uzataj por krei konsekvencan aspekton tra aplikaĵo, kaj ankaŭ provizi facilan manieron por programistoj rapide stiligi komponantojn sen devi mane ĝustigi ilin ĉiufoje kiam estas ŝanĝo.

pakaĵo de stilaj komponantoj

Styled-components estas populara pakaĵo por React Router, kiu permesas al programistoj krei kaj administri komponent-nivelajn stilojn en siaj React-aplikoj. Ĝi disponigas facilan manieron skribi CSS-kodon kiu estas ampleksita al ununura komponento, faciligante konservi kaj sencimigi. Styled-komponentoj ankaŭ faciligas kunhavigi stilojn tra pluraj komponentoj, same kiel provizi subtenon por temado. Plie, stilitaj komponentoj povas esti uzitaj kun la Link-komponento de React Router, permesante al programistoj stilligi ligilojn ene de sia aplikiĝo.

Kiel uzi Statikajn Stilojn

Senmovaj stiloj povas esti uzataj en React Router uzante la enlinian stilatributon. Ĉi tiu atributo permesas al vi apliki stilon rekte al elemento sen la bezono de aparta stilfolio. Por uzi senmovajn stilojn en React Router, vi devos krei stilobjekton kaj poste transdoni ĝin kiel argumenton al la stilapo de la komponanto. Ekzemple:

konst myStyle = {
fonkoloro: '#f2f2f2′,
tiparo: '20px',
koloro: '#000'
};