ReactJs 学习

刚刚学习react 好多不会的语法 希望有问题大家多多帮助

首先学习Rect 要简单知道js html 和css , 当然 我也什么不知道  从头开始

我们用到了微信的RectUI 导入后直接调用 下载地址：WXUI 按照文档安装就可以啦 当然中间我也出了问题 那就是少下载一个文件 命令一般为：npm install react-dom --save  可以调用淘宝接口否则要翻墙的 具体可以自行百度

第一个就是导入头文件

import React from 'react';
import {
  Cells,
  Cell,
  CellBody,
  CellFooter,
  CellHeader,
  CellsTitle,
  Toast,
} from 'react-weui';
import InfiniteScroll from 'react-infinite-scroller';
import './Group.css';
import { groups } from '../../../service/api.js';//获取网络请求// ../表示上一目录
import InfiniteScroll from 'react-infinite-scroller';
import './Group.css';
import { groups } from '../../../service/api.js';//获取网络请求// ../表示上一目录



然后开始定义组件
//定义组件 value参数
const ItemGrouper = ({ value }) => (
  <Cell >
    <CellHeader>//标签
      <img className="group_cell_header_img" src={value.avatar} alt="" /> //className 调用的是Group.css 里对应的格式
    </CellHeader>
    <CellBody className="group_cell_body">
      {value.nickname}//对象value里的nickname属性
    </CellBody>
    <CellFooter className="group_cell_footer">//CellFooter标签 表示一行sell 靠右边的内容 
      {value.cellphone}
    </CellFooter>
  </Cell>
);
css部分:
.group_cell_header_img{
    width: 50px;
    height: 50px;
    border-radius:50%; 
    float: left;
}

.group_cell_footer_img{
    padding-top: 10px;
}

.group_cell_body{
    margin-left: 10px;
    font-size: 15px;
    color: #333333;
}

.group_cell_footer {
    font-size: 13px;
    color: #2c8cdd;
    background: url('../../../assets/images/phone.png') no-repeat ;//路径
    background-size: 9px 13px; 
    padding-left: 16px;
}

.group_cell_footer a{
    color: #2c8cdd;
    margin-top: 10px;
}

.group_loader{
    padding: 14px;
    text-align: center;
    background-color: #eeeeee;
}

.group_header {
  margin-top: 0px;
}


具体UI及数据处理:
class Groups extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      header: {
        title: '',
        phone: '',
        display: 'block',
        telPhone: '',
      },
      showLoading: true,
      groupList: [],
      hasMore: false,
      page: 1,
    };
    this.loadMoreFn = this.loadMoreFn.bind(this);
    this.getGroupData = this.getGroupData.bind(this);
  }

  componentDidMount() {
    this.getGroupData();
  }

  getGroupData() {
    groups({ page: this.state.page })
      .then(({ jsonResult }) => {
        console.log(jsonResult);
        this.setState({
          showLoading: false,
          groupList: jsonResult.data.data_list,
          page: jsonResult.data.next_curosr,
          hasMore: jsonResult.data.next_curosr > 0,
          display: 'none',
          header: {
            title: '**公众号',
            phone: '13126654710',
            telPhone: 'tel:'.concat('13126654710'),
            display: 'block',
          },
        });
      });
  }

  loadMoreFn() {
    if (this.state.page === 1) {
      // 规避错误，page=1时永远不会到底加载更多
      return;
    }
    groups({ page: this.state.page })
      .then(({ jsonResult }) => {
        console.log(jsonResult);
        const temp = this.state.groupList.concat(jsonResult.data.data_list);
        this.setState({
          groupList: temp,
          page: jsonResult.data.next_curosr,
          hasMore: jsonResult.data.next_curosr > 0,
        });
      });
  }

  render() {
    return (
      <div>
        <Toast icon="loading" show={this.state.showLoading}>加载中...</Toast>
        <Cells>
          <Cell>
            <CellBody className="group_cell_body group_head_title">{this.state.header.title}</CellBody>
            <CellFooter className="group_cell_footer" style={{ display: this.state.header.display }}>
              <a href={this.state.header.telPhone}>{this.state.header.phone}</a>
            </CellFooter>
          </Cell>
        </Cells>
        <CellsTitle>我的下级</CellsTitle>
        <Cells>
          <InfiniteScroll
            loadMore={this.loadMoreFn}
            hasMore={this.state.hasMore}
            loader={<div className="group_loader">加载中 ...</div>}>
            {
              this.state.groupList.map((item, index) =>
                <ItemGrouper value={item} key={index} />)
            }
          </InfiniteScroll>
        </Cells>
      </div>
    );
  }
}

module.exports = Groups;




数据结构
const user = (page) => {
  let p = page || 1;
  return ({
    "id": `${p}`,
    "login": "yang",
    "nickname": "还有谁",
    "cellphone": "13723144563",
    "email": "china@china.com",
    "access_token": "fab2bf7a0878ed61e834c3cad09a5549",
    "avatar": "http://stimg2.tuicool.com/3uEjYv.png",
    "created_at": "2016-12-12 12:12:12",
    "updated_at": "2016-12-12 12:12:12"
  })
};