Masalah utama yang berkaitan dengan menggunakan gaya statik dengan React Router ialah sukar untuk menjejaki laluan yang berbeza dan gaya yang berkaitan dengannya. Dengan gaya statik, setiap laluan perlu mempunyai set peraturan CSS sendiri, yang boleh menjadi sukar dan sukar untuk dikekalkan dengan cepat. Selain itu, jika gaya digunakan dalam berbilang laluan, ia perlu diduplikasi merentas kesemuanya, menjadikannya sukar untuk mengekalkan kod KERING (Jangan Ulang Sendiri).
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. Baris pertama mengimport pustaka React.
2. Baris kedua mengimport komponen BrowserRouter, Route dan Link daripada pustaka react-router-dom.
3. Baris ketiga mengimport komponen gaya daripada perpustakaan komponen gaya.
4. Baris keempat mencipta komponen StyledLink menggunakan komponen Link yang diimport daripada react-router-dom dan gayakannya dengan warna: palevioletred dan font-weight: bold, serta kesan hover yang menukar warnanya kepada putih dan mengalih keluar sebarang teks hiasan apabila dilegarkan.
5. Baris kelima mencipta komponen Apl yang menghasilkan komponen Penghala dengan dua komponen Laluan di dalamnya (satu untuk Laman Utama dan satu untuk Perihal). Ia juga memaparkan senarai tidak tertib dua pautan (Home dan About) menggunakan komponen StyledLink yang dibuat dalam Baris 4 di atas kedua-duanya dipisahkan oleh teg jam untuk tujuan penggayaan.
6. Baris 8 – 11 mencipta dua komponen berfungsi dipanggil Laman Utama dan Perihal yang menjadikan teg h2 dengan nama masing-masing di dalamnya apabila dipanggil oleh komponen Laluan masing-masing dalam Baris 5 di atas kedua-duanya (Home menjadikan "Home" manakala Perihal menjadikan "Tentang" ).
7. Akhir sekali, Baris 12 mengeksport komponen Apl supaya ia boleh digunakan di tempat lain dalam aplikasi kami jika perlu
Gaya Statik
Gaya statik dalam Penghala React ialah gaya yang digunakan pada komponen dan kekal sama tanpa mengira sebarang perubahan pada keadaan atau prop komponen. Ini berbeza dengan gaya dinamik, yang berubah bergantung pada keadaan atau prop komponen. Gaya statik boleh digunakan untuk mencipta rupa dan rasa yang konsisten merentas aplikasi, serta menyediakan cara mudah untuk pembangun menggayakan komponen dengan cepat tanpa perlu melaraskannya secara manual setiap kali terdapat perubahan.
pakej komponen gaya
Komponen bergaya ialah pakej popular untuk Penghala React yang membenarkan pembangun mencipta dan mengurus gaya peringkat komponen dalam aplikasi React mereka. Ia menyediakan cara mudah untuk menulis kod CSS yang merangkumi satu komponen, menjadikannya lebih mudah untuk diselenggara dan nyahpepijat. Komponen bergaya juga memudahkan untuk berkongsi gaya merentas berbilang komponen, serta menyediakan sokongan untuk tema. Selain itu, komponen gaya boleh digunakan dengan komponen Pautan Penghala React, membenarkan pembangun menggayakan pautan dalam aplikasi mereka.
Cara menggunakan Gaya Statik
Gaya statik boleh digunakan dalam Penghala Reaksi dengan menggunakan atribut gaya sebaris. Atribut ini membolehkan anda menggunakan gaya terus pada elemen tanpa memerlukan lembaran gaya yang berasingan. Untuk menggunakan gaya statik dalam Penghala Reaksi, anda perlu mencipta objek gaya dan kemudian menyampaikannya sebagai hujah kepada prop gaya komponen. Sebagai contoh:
const myStyle = {
Warna latar belakang: '#f2f2f2′,
Saiz fon: '20px',
warna: '#000'
};
