Solvut: jirreaġixxi router billi tuża stili statiċi

Il-problema ewlenija relatata mal-użu ta 'stili statiċi ma' React Router hija li jista 'jkun diffiċli li żżomm kont tar-rotot differenti u l-istili assoċjati tagħhom. Bi stili statiċi, kull rotta jeħtieġ li jkollha s-sett tagħha ta 'regoli CSS, li malajr jistgħu jsiru diffiċli u diffiċli biex jinżammu. Barra minn hekk, jekk stil jintuża f'rotot multipli, jeħtieġ li jiġi duplikat fuqhom kollha, u b'hekk ikun diffiċli li jinżamm il-kodiċi DRY (M'għandekx Irrepeti lilek innifsek).

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. L-ewwel linja timporta l-librerija React.
2. It-tieni linja timporta l-komponenti BrowserRouter, Route, u Link mil-librerija react-router-dom.
3. It-tielet linja timporta l-komponent styled mill-librerija tal-komponenti styled.
4. Ir-raba 'linja toħloq komponent StyledLink billi tuża l-komponent Link importat minn react-router-dom u tistiljaha bil-kulur: palevioletred u font-weight: grassa, kif ukoll effett hover li jibdel il-kulur tiegħu għal abjad u jneħħi kwalunkwe test dekorazzjoni meta tittajjar fuq.
5. Il-ħames linja toħloq komponent App li jirrendi komponent Router b'żewġ komponenti tar-Rotta ġewwa fih (wieħed għad-Dar u ieħor għal Dwar). Jirrendi wkoll lista mhux ordnata ta 'żewġ links (Home u About) bl-użu tal-komponent StyledLink maħluqa fil-Linja 4 fuqhom it-tnejn separati b'tikketta hr għal skopijiet ta' stil.
6. Linji 8 – 11 joħolqu żewġ komponenti funzjonali msejħa Home u Dwar li jirrendu tags h2 bl-ismijiet rispettivi tagħhom ġewwa fihom meta mitluba mill-komponenti tar-Rotta rispettivi tagħhom fil-Linja 5 fuqhom it-tnejn (Home tirrendi “Dar” filwaqt li Dwar tirrendi “Dwar” ).
7. Fl-aħħarnett, Linja 12 tesporta l-komponent tal-App sabiex ikun jista' jintuża x'imkien ieħor fl-applikazzjoni tagħna jekk ikun meħtieġ

Stili statiċi

L-istili statiċi f'React Router huma stili li huma applikati għal komponent u jibqgħu l-istess irrispettivament minn kwalunkwe tibdil fl-istat jew props tal-komponent. Dan huwa b'kuntrast ma 'stili dinamiċi, li jinbidlu skond l-istat jew props ta' komponent. L-istili statiċi jistgħu jintużaw biex joħolqu dehra u sensazzjoni konsistenti madwar l-applikazzjoni, kif ukoll jipprovdu mod faċli għall-iżviluppaturi biex jagħmlu stil malajr komponenti mingħajr ma jkollhom għalfejn jaġġustawhom manwalment kull darba li jkun hemm bidla.

pakkett ta 'komponenti styled

Styled-components huwa pakkett popolari għal React Router li jippermetti lill-iżviluppaturi joħolqu u jimmaniġġjaw stili fil-livell tal-komponenti fl-applikazzjonijiet React tagħhom. Jipprovdi mod faċli biex tikteb kodiċi CSS li huwa skopert għal komponent wieħed, li jagħmilha aktar faċli biex jinżamm u jiġi debug. Styled-components jagħmilha aktar faċli biex taqsam stili f'diversi komponenti, kif ukoll tipprovdi appoġġ għat-tema. Barra minn hekk, komponenti styled jistgħu jintużaw mal-komponent Link ta 'React Router, li jippermetti lill-iżviluppaturi jfasslu links fl-applikazzjoni tagħhom.

Kif tuża Stili Statiċi

L-istili statiċi jistgħu jintużaw f'React Router billi tuża l-attribut tal-istil inline. Dan l-attribut jippermettilek li tapplika stil direttament għal element mingħajr il-ħtieġa ta 'stylesheet separata. Biex tuża stili statiċi f'React Router, ser ikollok bżonn toħloq oġġett ta 'stil u mbagħad tgħaddih bħala argument għall-prop tal-istil tal-komponent. Pereżempju:

const myStyle = {
backgroundColor: '#f2f2f2′,
FontSize: '20px',
kulur: '#000'
};