reactjs前端實踐｜第二篇：單頁應用示例路由及樣式的使用

時間 2019-11-16

標籤 reactjs 前端實踐第二單頁應用示例路由樣式使用欄目系統網絡简体版

原文原文鏈接

實踐二

簡單單頁應用，使用react-router v4.1.1，styled-components來實現。應用功能：三個導航標籤（Home,Stuff,Contact），點擊標籤切換頁面內容。css

難點分析

react-router v4 與之前版本變化較大，作web app時應引入react-router-dom，react-router如今成了其核心庫，只包含最基本的功能；html
styled-components的合理應用，資料少，只能看着官方文檔，一點點的試驗，一點點的理解；react

項目結構

增長styled目錄，自定義樣式組件，界面元素幾乎都在這個目錄中，只有index.html中還引入了一個css文件，定義基本元素的通用設定。git

-public
--index.html
--index.css
-src
--components
---Contact.js
---Home.js
---Stuff.js
--containers
---App.js
--styled
---Content.js
---Header.js
--index.js

代碼分析

路由使用了react-router v4，所以引入的是react-router-dom，開始使用react-router，這如今已是其核心庫，有些組件已經被剝離出去，好比：history，開始一直報錯，說：history是必需的，卻未定義。若想只用核心庫，就要本身安裝並配置history。github

路由設置

import {HashRouter as Router,Route} from 'react-router-dom';

ReactDOM.render(
    <Router>
        <App>                                                 //react-router v4容許在Router下聽任意標籤，也可象我這樣放自定義組件
            <Route exact path="/" component={Home} />         //exact是指path進行精確匹配，若不加，根目錄會與任何路徑都匹配。
            <Route path="/stuff" component={Stuff} />
            <Route path="/contact" component={Contact} />
        </App>
    </Router>,
    document.getElementById('root')
);

若使用核心組件，必需配置history，以下：web

import createHistory from 'history/createBrowserHistory'
const history = createHistory()

ReactDOM.render(
    <Router history={history}>
    ......
    </Router>
);

styled-components

styled-components將樣式組件化，我將基礎元素的樣式設置放在/public/index.css中，這是一個基調，styled的基本元素會繼承這些樣式。合理的使用styled-components的繼承，能讓組件設計更清晰、重用率更高。npm

樣式基礎設定（index.css）react-router

body {                                                        //頁面的基礎設定
  background-color: #FFCC00;
  padding: 20px;
  margin: 0;
}

h1, h2, p, ul, li{
    font-family: Helvetica, Arial, sans-serif;                //設定通用字體
}

自定義樣式（Header.js）app

import styled from 'styled-components';
import {NavLink} from 'react-router-dom';                  //第三方組件

const HeaderUl = styled.ul`                                //基本使用方法
    background-color: #111;
    padding: 0;
`;
......
const HeaderA = styled(NavLink)`                          //繼承第三方組件
    color: #FFF;
    font-weight: bold;
    text-decoration: none;
    padding: 20px;
    display: inline-block;
    
    &:hover {                                            //鼠標懸停事件定義
    color: yellow;
  }
`;

export {HeaderUl, HeaderLi, HeaderA};

頁面框架組織（App.js）框架

import {HeaderUl, HeaderLi, HeaderA} from '../styled/Header';
class App extends Component {
    render() {
        const activeStyle = {backgroundColor: "#0099FF"};                               //選中樣式對象使用內嵌方式，讓組件邏輯內聚
        return (
            <div>
                <h1>Simple SPA</h1>
                <HeaderUl className="header">
                    <HeaderLi><HeaderA exact to="/" activeStyle={activeStyle}>Home</HeaderA></HeaderLi>    //放棄activeClassName，使用activeStyle，讓本組件的數據徹底內聚
                    ......
                </HeaderUl>
                ......
            </div>
        );
    }
}

export default App;

頁面內容組織（Home.js)

import {ContentDivH2} from '../styled/Content';         //引入樣式組件
class Home extends Component {
    render() {
        return (
            <div>
                <ContentDivH2>HELLO</ContentDivH2>      //使用樣式組件
                <p>text content row one.</p>
                <p>text content row tow.</p>
            </div>
        );
    }
}
export default Home;

項目地址

https://git.oschina.net/zhoutk/reactodo.git
https://github.com/zhoutk/reactodo.git

使用方法

git clone https://git.oschina.net/zhoutk/reactodo.git
or git clone https://github.com/zhoutk/reactodo.git
cd reactodo
npm i
git checkout spa-web-app
npm start