React.js组件化开发第二步(添加样式及数据请求)

mengera88 发布于2019-08-20 18:31 / 1931人阅读

摘要：第一步主要说了一下框架的搭建及组件与路由的创建接下来主要是样式的添加及从后台获取数据添加样式美化页面化美化一下我们的公共组件在目录下添加样式要应用当然还必须得在组件中引用才行的哟修改来源于当然也可以开添加

第一步主要说了一下框架的搭建及组件与路由的创建;

接下来主要是样式的添加及从后台获取数据:

添加样式美化页面

化美化一下我们的公共组件: 在 /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及相应组件大数据开发组件大数据开发面试题及答案

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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