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

Posted 2021-05-01 前端JavaScript

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

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

添加样式美化页面

化美化一下我们的公共组件: 在 /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) => (

  <ul className="nav-bar">

    <li><Link to="/">Home</Link></li>

    <li><Link to="/about">About</Link></li>

    <li><Link to="/list">List</Link></li>

    <li className="source">来源于: {props.title}</li>

  </ul>

);

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 = () => (

  <div>

    <NavBar title="关于页" />

    <h1 className="content">这是关于页</h1>

  </div>

);

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 <MyComponent { ...this.props } data={this.state.data} />

    }

  }

}

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 (

    <div>

      <NavBar title="列表页" />

      <ul className="content list">

        {

          props.data && props.data.length > 0 &&

          props.data.map((item, index) => (

            <li key={index}>

              <strong>名称: </strong>

              <span>{ item.answer }</span>

              <time>{ item.createTime }</time>

            </li>

          ))

        }

      </ul>

    </div>

  );

};

export default Connect(List);

现在命令行切到项目根目录, 执行 yarn run start 启动项目, 浏览器内查看 列表 组件, 是不是从服务端获取的数据了;

最后

现在跟据这些所掌握的内容, 就可以开始的一个完整的 React.js 项目了。源码（https://github.com/YuanWing/react-learns/tree/two-step）

作者 : YuanWing

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

 ====================