企业微信会话点击每一个item，渲染聊天内容

首先父组件要获取聊天接口，通过id获取(先在servers/api/wechat.js组件中获取接口)

import request from 'utils/request';
import {
    stringify } from 'qs';
import {
    wechatV1 as v1, checkCode } from '../config';

// -------------------会话页面--------------------------------------------------------会话

// 获取--客户----   --右侧
export async function customersTest(id,params) {
   
  const response = request(`${
     v1}/wechat/customers/${
     id}/contents?${
     stringify(params)}`);
  return checkCode(response)
}

// 获取--员工----  --右侧
export async function staffsTest(id,params) {
   
  const response = request(`${
     v1}/wechat/staffs/${
     id}/contents?${
     stringify(params)}`);
  return checkCode(response)
}

// 获取--群-----客户群-- && -- 内部群 --右侧
export async function groupsTest(id,params) {
   
  const response = request(`${
     v1}/wechat/groups/${
     id}/contents?${
     stringify(params)}`);
  return checkCode(response)
}


// 获取群会话列表  --客户群--左侧 
export async function groupsLeftOutTest(params) {
   
  const response = request(`${
     v1}/wechat/groups?type=0${
     stringify(params)}`);
  return checkCode(response);
}

然后在models/wechat.js组件中去请求id和其他元素（这个组件是dev相当于一个模块）

import {
    message } from 'antd';
import * as API from '../services/api';

export default {
   
  namespace: 'wechat',

  state: {
   },

  effects: {
   
    // --------------------会话页面-----------------------------------------会话

    // 获取--客户----   --右侧
    *customersTest({
    payload: {
    id, ...rest }, callback }, {
    call }) {
   
      const response = yield call(API.customersTest,  id, {
    ...rest });
      if (response.code === 0) {
   
        if (callback) callback(response.data);
      }
    },

    // 获取--员工----  --右侧
    *staffsTest({
    payload: {
    id, ...rest }, callback }, {
    call }) {
   
      const response = yield call(API.staffsTest, id, {
    ...rest });
      if (response.code === 0) {
   
        if (callback) callback(response.data);
      }
    },

    // 获取--群-----客户群-- && -- 内部群 --右侧
    *groupsTest({
    payload: {
    id, ...rest }, callback }, {
    call }) {
   
      const response = yield call(API.groupsTest, id, {
    ...rest });
      if (response.code === 0) {
   
        if (callback) callback(response.data);
      }
    },

    // 获取群会话列表  --客户群--左侧 
    *groupsLeftOutTest({
    payload, callback }, {
    call }) {
   
      const response = yield call(API.groupsLeftOutTest, payload);
      if (response.code === 0) {
   
        if (callback) callback(response.data);
      }
    },

    // // 获取群会话列表  --内部群--左侧 
    *groupsLeftMinTest({
    payload, callback }, {
    call }) {
   
      const response = yield call(API.groupsLeftMinTest, payload);
      if (response.code === 0) {
   
        if (callback) callback(response.data);
      }
    },
    
},
reducers: {
   },
  }

还有就是员工和客户接口请求是一样的类型，都是为了在左侧渲染，就不放这里啦！

接下来：我们就开始做最主要的渲染页面啦！！！（关键）

首先呢，这是我们的主页面（就是父组件，接下来的所有都是子组件，要通过这个组件来传值的）

/**
 * @param {object} data - 读取数据
 * @param {String} btnVal - 在value中做比较，判断是否选中
 * @param {boolean} loading - 是否加载
 * @param {Function} handleInfiniteOnLoad - 配置加载的限制
 *  @param {Function} clickCode - 点击客户显示数据
 *  @param {Function} clickMen - 点击客户群显示数据
 *  @param {Function} clickMin - 点击内部群显示数据
 * 
 * */

import React, {
    PureComponent, Fragment } from 'react';

import {
    connect } from 'dva';
import PageHeaderLayout from 'layouts/PageHeaderLayout';

import StyleTab from 'assets/less/but.less';
import {
    Radio, Form, Input, Row, Col, Pagination, Button, List, message, Avatar, Spin, Card } from 'antd';
// import Logo from 'assets/image/logo.png';
import './index.less';
import Right from './Right';





@connect(({
    wechat, loading }) => ({
   
  wechat,
  loading: loading.effects['wechat/staffsList'],
  staffLoading: loading.effects['wechat/staffSyncList'],
}))

export default class Left extends PureComponent {
   

  constructor(props) {
   
    super(props);
    this.state = {
   
      btnVal: '1',
      data: [],
      loading: false,
      dataList: [],
      // param: {},
      page: {
   },
    }
  }

  componentDidMount() {
   

    // 初始化页面展示员工列表
    this.staffSpeak()

    // this.clickCode()
  };


  // 配置加载的限制
  handleInfiniteOnLoad = () => {
   
    let {
    data } = this.state;
    this.setState({
   
      loading: true,
    });
    if (data.length > 14) {
   
      message.warning('Infinite List loaded all');
      this.setState({
   
        loading: false,
      });
      return;
    };
    this.fetchData(res => {
   
      data = data.concat(res.results);
      this.setState({
   
        data,
        loading: false,
      });
    });
  };

  // 在value中做比较，判断是否选中
  handleBtnChange = e => {
   
    this.setState({
    btnVal: e.target.value });
  };

  // 点击   --员工  --左侧
  staffSpeak = () => {
   
    const {
    dispatch } = this.props;
    dispatch({
   
      type: 'wechat/staffsList',
      payload: {
   },
      callback: res => {
   
        this.setState({
    data: res.list })
      },
    })
  }

  // 客户 --左侧
  customersSpeak = () => {
   
    const {
    dispatch } = this.props;
    dispatch({
   
      type: 'wechat/customersList',
      payload: {
   },
      callback: res => {
   
        // console.log("客户",res);
        this.setState({
    data: res.list })
      },
    })
  };

  // 客户群 --左侧
  groupsLeftSpeak = () => {
   
    // this.setState({
   
    //   data: [
    //     { name: '北京儿童医院对接群', department: '成员数：10人' },
    //     { name: '天津人民医院消化科群', department: '成员数：10人' },
    //   ],
    // })
    const {
    dispatch } = this.props;
    dispatch({
   
      type: 'wechat/groupsLeftOutTest',
      payload: {
   },
      callback: res => {
   
        // console.log(res, "客户群555");
        this.setState({
    data: res.list })
      },
    })
  };

  // 内部群  --左侧
  groupsLeftMinSpeak = () => {
   
    // this.setState({
   
    //   data: [
    //     { name: '信息中心', department: '人数：8人' },
    //     { name: '销售部-LIMS系统问题反馈群', department: '人数：112人' },
    //   ],
    // })
    const {
    dispatch } = this.props;
    dispatch({
   
      type: 'wechat/groupsLeftMinTest',
      payload: {
   },
      callback: res => {
   
        // console.log(res, "客户内部群左侧");
        this.setState({
    data: res.list })
      },
    })
  };
  // 点击跳转结束

  // 点击员工姓名开始  --右侧
  staffName = (item, page) => {
   
    const {
    dispatch } = this.props;
    // console.log(item, 129);
    dispatch({
   
      type: 'wechat/staffsTest',
      payload: {
    id: item.id, page },
      callback: res => {
   
        // console.log('点击渲染右侧', res, 9);
        this.setState({
   
          dataList: res.list,
          page: res.pagination,
          id: item.id,
        })
      },
    })

  };
  // 点击员工姓名结束

  // 客户item开始  --右侧
  customersName = (item, page) => {
   
    const {
    dispatch } = this.props;
    dispatch({
   
      type: "wechat/customersTest",
      payload: {
    id: item.id, page },
      callback: res => {
   
        // console.log(res, "客户会话");
        this.setState({
   
          dataList: res.list,
          page: res.pagination,
          id: item.id,
        })
      },
    })
  };
  // 客户item结束

  // 客户群---右侧   --内部群
  groupsCusName = (item, page) => {
   
    const {
    dispatch } = this.props;
    dispatch({
   
      type: "wechat/groupsTest",
      payload: {
    id: item.id, page },
      callback: res => {
   
        // console.log(res, "群会话");
        this.setState({
   
          dataList: res.list,
          page: res.pagination,
          id: item.id,
        })
      },
    })
  }
  // 客户群---右侧结束 --内部群



  render() {
   
    // const { id } = this.props;
    const {
    btnVal, loading, data, dataList, page, id } = this.state;
    // console.log(param, 700);
    // console.log(page, 55555);
    // console.log(dataList, btnVal, 100);
    return (
      <Fragment>
        <PageHeaderLayout breadcrumbExtraContent={
   
          <Button type="primary" style={
   {
    backgroundColor: '#169BD5', width: 82, height: 25, border: 'none', fontSize: 14, paddingTop: 2, marginTop: 5 }} className={
   StyleTab.hovered}>
            同步会话
          </Button>
        }
        >
          <Card bordered={
   false}>
            <Row>
              <Col
                span={
   8}
                style={
   {
    marginTop: -24, borderRight: '1px solid #d9d9d9', paddingRight: 24 }}
              >
                <div style={
   {
    paddingTop: 24 }}>
                  {
   /* button开始 */}
                  <Radio.Group style={
   {
    textAlign: 'center', width: '100%', marginBottom: 13 }} value={
   btnVal} onChange={
   this.handleBtnChange}>
                    <Radio.Button style={
   {
    width: '25%' }} value="1" onClick={
   () => this.staffSpeak()}>员工</Radio.Button>
                    <Radio.Button style={
   {
    width: '25%' }} value="2" onClick={
   () => this.customersSpeak()}>客户</Radio.Button>
                    <Radio.Button style={
   {
    width: '25%' }} value="3" onClick={
   () => this.groupsLeftSpeak()}>客户群</Radio.Button>
                    <Radio.Button style={
   {
    width: '25%' }} value="4" onClick={
   () => this.groupsLeftMinSpeak()}>内部群</Radio.Button>
                  </Radio.Group>
                  {
   /* button结束 */}

                  {
   /* 查询开始 */}
                  <Form style={
   {
    marginTop: 12 }}>
                    <Row>
                      <Col span={
   14}>
                        <Form.Item name="name" label="姓名">
                          <Input placeholder="请输入" />
                        </Form.Item