React.js組件化開發(fā)第二步(添加樣式及數(shù)據(jù)請求)

mengera88 發(fā)布于2019-08-20 18:31 / 2036人閱讀

摘要：第一步主要說了一下框架的搭建及組件與路由的創(chuàng)建接下來主要是樣式的添加及從后臺獲取數(shù)據(jù)添加樣式美化頁面化美化一下我們的公共組件在目錄下添加樣式要應(yīng)用當(dāng)然還必須得在組件中引用才行的喲修改來源于當(dāng)然也可以開添加

第一步主要說了一下框架的搭建及組件與路由的創(chuàng)建;

接下來主要是樣式的添加及從后臺獲取數(shù)據(jù):

添加樣式美化頁面

化美化一下我們的公共組件: 在 /src/components/Common/ 目錄下添加 NavBar.css:

.nav-bar {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
  display: flex;
  text-align: center;
  background-color: #fff;
  border-bottom: 1px solid #e5e5e5;
}
.nav-bar li {
  flex: 1;
  border-right: 1px solid #e5e5e5;
}
.nav-bar a {
  display: block;
  color: #333;
  padding: 10px;
  text-decoration: none;
}
.nav-bar .source {
  font-size: 12px;
  padding: 10px;
  border-right: 0 none;
}

樣式要應(yīng)用, 當(dāng)然還必須得在組件中引用才行的喲, 修改/src/components/Common/NavBar.js:

import React from "react";
import {
  Link,
} from "react-router-dom";
import "./NavBar.css";

const NavBar = (props) => (
  
    Home
    About
    List
    來源于: {props.title}
  
);

export default NavBar;

當(dāng)然, 也可以開添加一些公共樣式, 這樣在每個組件內(nèi)都可以使用, 修改/src/index.css:

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background-color: #f5f5f5;
}
.content {
  margin: 0;
  padding: 20px;
  font-size: 18px;
  background-color: #fff;
  border-bottom: 1px solid #e5e5e5;
}

因為 index.css 在 index.js 中引入了, 我們在其他組件中不用引用, 直接使用就好啦, 修改關(guān)于組件/src/components/About/About.js:

import React from "react";
import NavBar from "../Common/NavBar";

const About = () => (
  
    
    這是關(guān)于頁
  
);

export default About;

其他組件的修改也是一樣的, 即在組件中給 className 貶值為樣式名即可;

現(xiàn)在命令行切到項目根目錄, 執(zhí)行yarn run start啟動項目, 在瀏覽器內(nèi)查看添加樣式后的效果;

從服務(wù)端獲取數(shù)據(jù)

這里使用的 axios來獲取數(shù)據(jù), 先安裝包:

$ yarn add axios

下面的實例演示一下

在src目錄內(nèi)創(chuàng)建一個service的目錄, 并創(chuàng)建一個 Connect.js 的文件:

import React, { Component } from "react";
import axios from "axios";


const Connect = (MyComponent) => {
  return class extends Component {
    constructor(props) {
      super(props);
      this.state = {
        data: [],
      };
    }

    componentDidMount() {
      axios.get("http://rapapi.org/mockjsdata/23242/v1/question/page")
        .then(res => res.data)
        .then(data => {
          this.setState({
            data: data.data.recordList
          });
        })
      
    }

    render() {
      return 
    }
  }
}

export {
  Connect,
}

修改列表組件/src/components/List/List.js:

import React from "react";
import NavBar from "../Common/NavBar";
import { Connect } from "../../service/Connect";
import "./List.css";

const List = (props) => {
  return (
    
      
      
        {
          props.data && props.data.length > 0 &&
          props.data.map((item, index) => (
            
              名稱: 
              { item.answer }
              { item.createTime }
            
          ))
        }
      
    
  );
};

export default Connect(List);

現(xiàn)在命令行切到項目根目錄, 執(zhí)行 yarn run start 啟動項目, 瀏覽器內(nèi)查看列表組件, 是不是從服務(wù)端獲取的數(shù)據(jù)了;

最后

現(xiàn)在跟據(jù)這些所掌握的內(nèi)容, 就可以開始的一個完整的 React.js 項目了。源碼