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

mengera88 發布于2019-08-20 18:31 / 2030人閱讀

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

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

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

添加樣式美化頁面

化美化一下我們的公共組件: 在 /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;
}

樣式要應用, 當然還必須得在組件中引用才行的喲, 修改/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;

當然, 也可以開添加一些公共樣式, 這樣在每個組件內都可以使用, 修改/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 中引入了, 我們在其他組件中不用引用, 直接使用就好啦, 修改關于組件/src/components/About/About.js:

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

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

export default About;

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

現在命令行切到項目根目錄, 執行yarn run start啟動項目, 在瀏覽器內查看添加樣式后的效果;

從服務端獲取數據

這里使用的 axios來獲取數據, 先安裝包:

$ yarn add axios

下面的實例演示一下

在src目錄內創建一個service的目錄, 并創建一個 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);

現在命令行切到項目根目錄, 執行 yarn run start 啟動項目, 瀏覽器內查看列表組件, 是不是從服務端獲取的數據了;

最后

現在跟據這些所掌握的內容, 就可以開始的一個完整的 React.js 項目了。源碼

云服務器 GPU云服務器組件樣式安裝php及相應組件大數據開發組件大數據開發面試題及答案

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84626.html

React.js組件化開發第一步(框架搭建)

摘要：開始前安裝安裝安裝安裝完成后將鏡像替換成國內的安裝查看安裝版本項目初始化命令行切到需要創建項目的目錄內然后執行是項目的名稱也是文件夾的名稱命令行切到剛創建的項目運行項目執行以下命令會自動打開瀏覽器并防問初始化生成開始前安裝 node.js; 安裝 cnpm; 安裝 yarn; 安裝完成yarn后, 將鏡像替換成國內的: $ yarn config set registry h...

Betta 2019-08-20 18:30 評論0 收藏0
最近遇到的前端面試題(2017.03.08更新版)

摘要：通過管理組件通信通過驅動視圖比較差異進行更新操作作者第七頁鏈接來源知乎著作權歸作者所有，轉載請聯系作者獲得授權。達到無刷新的效果。對象的狀態不受外界影響。對象代表一個異步操作，有三種狀態進行中已完成，又稱和已失敗。以下問題解釋非本人原創，是根據面試經驗整理后覺得更容易理解的解釋版本，歡迎補充。一. 輸入url后的加載過程從輸入 URL 到頁面加載完成的過程中都發生了什么計算機...

linkFly 2019-08-21 11:35 評論0 收藏0
最近遇到的前端面試題(2017.03.08更新版)

摘要：通過管理組件通信通過驅動視圖比較差異進行更新操作作者第七頁鏈接來源知乎著作權歸作者所有，轉載請聯系作者獲得授權。達到無刷新的效果。對象的狀態不受外界影響。對象代表一個異步操作，有三種狀態進行中已完成，又稱和已失敗。以下問題解釋非本人原創，是根據面試經驗整理后覺得更容易理解的解釋版本，歡迎補充。一. 輸入url后的加載過程從輸入 URL 到頁面加載完成的過程中都發生了什么計算機...

Nosee 2019-08-30 15:53 評論0 收藏0
最近遇到的前端面試題(2017.03.08更新版)

摘要：通過管理組件通信通過驅動視圖比較差異進行更新操作作者第七頁鏈接來源知乎著作權歸作者所有，轉載請聯系作者獲得授權。達到無刷新的效果。對象的狀態不受外界影響。對象代表一個異步操作，有三種狀態進行中已完成，又稱和已失敗。以下問題解釋非本人原創，是根據面試經驗整理后覺得更容易理解的解釋版本，歡迎補充。一. 輸入url后的加載過程從輸入 URL 到頁面加載完成的過程中都發生了什么計算機...

劉東 2019-08-01 16:29 評論0 收藏0
React 核心思想之聲明式渲染

摘要：模板北京時間數據渲染數據渲染將數據和模板綁定在渲染聲明式渲染和普通模板不同的是，模板寫在文件中，而不是的標簽中。創建模板容器類北京時間渲染指令數據只用于存放可變的數據。北京時間通過算法計算如何更新視圖。 React 發展很快，概念也多，本文目的在于幫助初學者理清 React 核心概念。 React 及 React 生態 showImg(http://www.ruanyifeng.com...

baiy 2019-08-20 12:14 評論0 收藏0