React.js元件化開發第二步(新增樣式及資料請求)

YuanWing發表於2017-08-03
ReactJS元件化

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

接下來主要是樣式的新增及從後臺獲取資料:

新增樣式美化頁面

  • 化美化一下我們的公共元件: 在 /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 專案了。原始碼

相關文章