React---组件踩坑以及无状态组件

组件名首字母大写即可

无状态组件：不继承Component 没有生命周期函数 只有ui

import React from 'react'
import {Input,Button,List} from "antd";

const TodoListUI = (props) =>{
  return (  
    <div>
        <div className="header">
          <Input 
          style={{width:"200px"}} 
          placeholder="请输入内容" 
          value={props.inputValue} 
          onChange={props.inputChange}>
          </Input>
          <Button type="primary" onClick={props.addDatas}>
            增加服务
          </Button>
        </div>
        <List
          style={{width:"300px"}}
          bordered
          dataSource={props.datas}
          renderItem={(item,index)=> (
            <List.Item onClick={()=>{props.deleteItem(index)}}>
              { item }
            </List.Item>
          )}
        />
    </div>
  );
}

 
export default TodoListUI;

jsx代码实践:

<script>
import Vue from "vue";
import { Decrypt, Encrypt } from "../../../../../static/js/utils.js";
import http from "@/assets/api/index.js";
import qs from "qs";
import {
  Table,
  Button,
  Input,
  Select,
  Modal,
  Popconfirm,
  Form
} from "ant-design-vue";
import store from "@/store/index";
import { mapGetters } from "vuex";

export default {
  name: "UserList",
  components: {
    Table,
    Button,
    Select,
    Option: Select.Option,
    Modal,
    Popconfirm,
    Form,
    Input
  },
  store,
  data() {
    return {
      tableColumn: [
        {
          title: "序号",
          key: "index",
          dataIndex: "index",
          customRender: (text, record, index) => {
            return (this.pagination.current - 1) * 10 + index + 1;
          }
        },
        {
          title: "用户名",
          key: "userName",
          dataIndex: "userName",
          customRender: (text, record, index) => {
            return <span>{text}</span>;
          }
        },
        {
          title: "角色",
          key: "authority",
          dataIndex: "authority;",
          customRender: (text, record, index) => {
            return (
              <span>
                {record.authority === 2 ? "超级管理员" : "普通管理员"}
              </span>
            );
          }
        },
        {
          title: "状态",
          key: "status",
          dataIndex: "status",
          customRender: (text, record, index) => {
            return (
              <Popconfirm
                title={record.status === 0 ? "你确认禁用？" : "你确认启用？"}
                onConfirm={() => {
                  this.confirmStatus(record.userId, record.status);
                }}
                onCancel={() => {
                  this.cancelStatus;
                }}
                okText="确认"
                cancelText="取消"
              >
                <span style={{ color: "#06a5ff" }}>
                  {" "}
                  {record.status === 0 ? "启用" : "禁用"}
                </span>
              </Popconfirm>
            );
          }
        },

        {
          title: "操作",
          key: "action",
          dataIndex: "action",
          customRender: (text, record, index) => {
            return (
              <Popconfirm
                title="你确认删除吗？"
                onConfirm={() => {
                  this.confirmDelete(record.userId);
                }}
                onCancel={() => {
                  this.cancelStatus;
                }}
                okText="确认"
                cancelText="取消"
              >
                <a
                  style={{
                    color: this.userName !== record.userName ? "#06a5ff" : ""
                  }}
                  disabled={this.userName == record.userName}
                >
                  删除
                </a>
              </Popconfirm>
            );
          }
        }
      ],
      loading: false,
      dataSource: [], // 数据源
      userInfo: {},
      userId: "",
      pagination: {
        current: 1,
        total: 10
      },
      searchParams: {},
      addvisible: false,
      statuses: [
        {
          key: 2,
          value: "全部数据"
        },
        {
          key: 0,
          value: "启用"
        },
        {
          key: 1,
          value: "禁用"
        }
      ]
    };
  },
  computed: mapGetters(["userName"]),
  methods: {
    // 查询所有管理员
    async selectAllAdmin() {
      this.loading = true;
      this.searchParams = Object.assign(this.searchParams, {
        currentpage: this.pagination.current,
        limit: 10
      });
      const res = await http.getAdminList(this.searchParams);
      if (res && res.data.code === 200) {
        const dataSource = res.data.data.data;
        const total = res.data.data.total;
        this.dataSource = dataSource;
        this.pagination.total = total;
        this.loading = false;
      } else {
        this.$message.error("查询出错");
      }
    },
    // 删除
    async confirmDelete(userId) {
      const res = await http.getAdminDelete({ userId });
      if (res && res.data.code === 200) {
        this.$message.success("删除成功");
        this.selectAllAdmin();
      }
    },
    // 改变用户状态
    async confirmStatus(userId, status) {
      const res = await http.getAdminChangeStatus({
        userId,
        status
      });
      if (res && res.data.code === 200) {
        this.$message.success("修改成功");
        //调用获取数据的方法
        this.selectAllAdmin();
      } else {
        this.$message.error("修改失败");
      }
    },
    cancelStatus() {},
    // 下拉框筛选
    handleStatusChange(status) {
      if (status === 2) {
        Vue.delete(this.searchParams, "status");
      } else {
        this.searchParams = Object.assign(this.searchParams, { status });
      }
      this.selectAllAdmin();
    },
    //   表格改变
    onTableChange(pagination, filters, sorter, extra) {
      this.pagination.current = pagination.current;
      this.selectAllAdmin();
    },
    // 新增对话框
    showAddModal() {
      this.addvisible = true;
    },
    // 隐藏新增对话框
    async handleModalOk() {
      const res = await http.getAdminAdd({
        userId: this.userId
      });
      if (res && res.data.code === 200) {
        this.$message.success("新增成功");
        this.userId = "";
        this.addvisible = false;
        this.userInfo = {};
        this.selectAllAdmin();
      }
    },
    // 对话框确认
    hideAddModal() {
      this.userId = "";
      this.addvisible = false;
    },
    inputChange(e) {
      this.userId = e.target.value;
    },
    async searchUser() {
      // getAdminAdd
      const res = await http.getUserInfobyid({
        userId: this.userId
      });
      if (res && res.data.code === 200) {
        const userInfo = res.data.data;
        this.userInfo = userInfo;
        this.handleModalOk();
      }
    }
  },

  created() {
    this.selectAllAdmin();
  },
  render(h) {
    const {
      dataSource,
      tableColumn,
      statuses,
      pagination,
      onTableChange,
      loading
    } = this;
    return (
      <div style={{ width: "100%", positive: "relative" }}>
        <div
          style={{
            padding: "0 10px 10px 10px",
            display: "flex",
            flexDirection: "row",
            justifyContent: "space-between"
          }}
        >
          <a-select
            style={{ width: "120px" }}
            placeholder="请选择"
            onChange={this.handleStatusChange}
          >
            {statuses.map((item, index) => {
              return (
                <a-select-option key={index + item} value={item.key}>
                  {item.value}
                </a-select-option>
              );
            })}
          </a-select>
          <Button type="primary" style={{width:"80px"}} onClick={this.showAddModal}>
            新增
          </Button>
        </div>
        <Table
        style={{marginLeft:"10px"}}
          bordered
          loading={loading}
          onChange={onTableChange}
          pagination={pagination}
          columns={tableColumn}
          dataSource={dataSource}
        />
        ,
        <Modal
          title="新增管理员"
          visible={this.addvisible}
          onOk={this.handleModalOk}
          onCancel={this.hideAddModal}
        >
          <div style={{ width: "300px", margin: "0 auto" }}>
            <Input
              style={{ width: "200px", marginRight: "20px" }}
              placeholder="请输入搜索条件"
              onChange={this.inputChange}
            />
            <Button type="primary" onClick={this.searchUser}>
              搜索
            </Button>
            {JSON.stringify(this.userInfo) !== "{}" ? (
              <div style={{ marginTop: "10px" }}>
                <span>{this.userInfo.userName}</span>---
                <span>{this.userInfo.userId}</span>
              </div>
            ) : (
              <div></div>
            )}
          </div>
        </Modal>
      </div>
    );
  }
};
</script>