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

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

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

添加样式美化页面

• 化美化一下我们的公共组件: 在 /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 项目了。源码