成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

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

mengera88 / 2037人閱讀

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

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

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

添加樣式美化頁(yè)面

化美化一下我們的公共組件: 在 /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
    • 
    
  • 來(lái)源于: {props.title}
    • 
  

);

export default NavBar;

當(dāng)然, 也可以開(kāi)添加一些公共樣式, 這樣在每個(gè)組件內(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;
}

因?yàn)?index.css 在 index.js 中引入了, 我們?cè)谄渌M件中不用引用, 直接使用就好啦, 修改關(guān)于組件/src/components/About/About.js:

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

const About = () => (
  

    
    
這是關(guān)于頁(yè)

  

);

export default About;

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

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

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

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

$ yarn add axios

下面的實(shí)例演示一下

在src目錄內(nèi)創(chuàng)建一個(gè)service的目錄, 并創(chuàng)建一個(gè) 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) => (
            
  • 
              名稱(chēng): 
              { item.answer }
              
            
    • 
          ))
        }
      

    

  );
};

export default Connect(List);

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

最后

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/84626.html

相關(guān)文章

  • React.js組件化開(kāi)發(fā)第一步(框架搭建)

    摘要：開(kāi)始前安裝安裝安裝安裝完成后將鏡像替換成國(guó)內(nèi)的安裝查看安裝版本項(xiàng)目初始化命令行切到需要?jiǎng)?chuàng)建項(xiàng)目的目錄內(nèi)然后執(zhí)行是項(xiàng)目的名稱(chēng)也是文件夾的名稱(chēng)命令行切到剛創(chuàng)建的項(xiàng)目運(yùn)行項(xiàng)目執(zhí)行以下命令會(huì)自動(dòng)打開(kāi)瀏覽器并防問(wèn)初始化生成 開(kāi)始前 安裝 node.js; 安裝 cnpm; 安裝 yarn; 安裝完成yarn后, 將鏡像替換成國(guó)內(nèi)的: $ yarn config set registry h...

    Betta 評(píng)論0 收藏0

  • 最近遇到的前端面試題(2017.03.08更新版)

    摘要：通過(guò)管理組件通信通過(guò)驅(qū)動(dòng)視圖比較差異進(jìn)行更新操作作者第七頁(yè)鏈接來(lái)源知乎著作權(quán)歸作者所有，轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)。達(dá)到無(wú)刷新的效果。對(duì)象的狀態(tài)不受外界影響。對(duì)象代表一個(gè)異步操作，有三種狀態(tài)進(jìn)行中已完成，又稱(chēng)和已失敗。 以下問(wèn)題解釋非本人原創(chuàng)，是根據(jù)面試經(jīng)驗(yàn)整理后覺(jué)得更容易理解的解釋版本，歡迎補(bǔ)充。 一. 輸入url后的加載過(guò)程 從輸入 URL 到頁(yè)面加載完成的過(guò)程中都發(fā)生了什么 計(jì)算機(jī)...

    linkFly 評(píng)論0 收藏0

  • 最近遇到的前端面試題(2017.03.08更新版)

    摘要：通過(guò)管理組件通信通過(guò)驅(qū)動(dòng)視圖比較差異進(jìn)行更新操作作者第七頁(yè)鏈接來(lái)源知乎著作權(quán)歸作者所有，轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)。達(dá)到無(wú)刷新的效果。對(duì)象的狀態(tài)不受外界影響。對(duì)象代表一個(gè)異步操作，有三種狀態(tài)進(jìn)行中已完成，又稱(chēng)和已失敗。 以下問(wèn)題解釋非本人原創(chuàng)，是根據(jù)面試經(jīng)驗(yàn)整理后覺(jué)得更容易理解的解釋版本，歡迎補(bǔ)充。 一. 輸入url后的加載過(guò)程 從輸入 URL 到頁(yè)面加載完成的過(guò)程中都發(fā)生了什么 計(jì)算機(jī)...

    Nosee 評(píng)論0 收藏0

  • 最近遇到的前端面試題(2017.03.08更新版)

    摘要：通過(guò)管理組件通信通過(guò)驅(qū)動(dòng)視圖比較差異進(jìn)行更新操作作者第七頁(yè)鏈接來(lái)源知乎著作權(quán)歸作者所有，轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)。達(dá)到無(wú)刷新的效果。對(duì)象的狀態(tài)不受外界影響。對(duì)象代表一個(gè)異步操作，有三種狀態(tài)進(jìn)行中已完成，又稱(chēng)和已失敗。 以下問(wèn)題解釋非本人原創(chuàng)，是根據(jù)面試經(jīng)驗(yàn)整理后覺(jué)得更容易理解的解釋版本，歡迎補(bǔ)充。 一. 輸入url后的加載過(guò)程 從輸入 URL 到頁(yè)面加載完成的過(guò)程中都發(fā)生了什么 計(jì)算機(jī)...

    劉東 評(píng)論0 收藏0

  • React 核心思想之聲明式渲染

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

    baiy 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<