How to use Vue+ElementUI Tree
|
The use of Vue+ElementUI Tree is for your reference. The specific content is as follows
Front-end code
<template>
<div>
<el-dialog title="Terminal Address Book" :visible.sync="isOpen" class="el-dialog-mini">
<div class="forms-menu-con">
<!--
check-on-click-node: Set whether to select the checkbox when selecting Chinese characters props: define the match between the node and the field you provide (for example, the name corresponds to the name attribute queried from the database)
data: data in the Tree, where the fields can be customized, and more business fields can be added. When clicking, the function is called to get the value. node-key: unique, which means which field is used as the unique identifier when the node is selected. render-content: content rendering. If you want to add icons and other styles to the tree menu, use this attribute and configure a rendering function. check-change: when the check box state changes, the function is triggered. This is mainly used for single-select operations and business processing. show-checkbox: display the check box. highlight-current: highlight the selected node. check-strictly: when the check box is displayed, whether to strictly follow the practice of not having the parent and child nodes related to each other. The default value is false
-->
<el-tree :data="treeData" :props="treeProps" :check-strictly="true" node-key="id" ref="treeForm" :render-content="renderContent" @check-change="handleClick" show-checkbox highlight-current class="addtree" style="height:275px;">
</el-tree>
<el-col class="form-search colum-center">
<el-button @click="submit">
<i class="ump-save" style="font-size:15px;"></i>OK</el-button>
<el-button @click="close">
<i class="ump-quxiao3" style="font-size:16px;"></i>Close</el-button>
</el-col>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
isOpen: false,
ifonlyTerminal: 1,
treeData: [],
treeProps: {
label: 'label',
children: 'kids',
disabled: this.disabledFn
}
}
},
methods: {
disabledFn(data, node) {
return data.nodeType == 0;
},
handleClick(data, checked, node) {
let $this = this;
if (checked) {
console.log(data);
/** This node is always single-select*/
//$this.$refs.treeForm.setCheckedNodes([data]);
/** This node is used for multiple selection*/
$this.$refs.treeForm.setChecked([data]);
}
},
renderContent(h, {
node,
data,
store
}) {
return (
<span class = "custom-tree-node" >
<span>
<i class = {data.icon} ></i>
{ data.label }
</span>
</span>
);
},
open(selections,ifonlyTerminal) {
let $this = this;
$this.treeData=[];
$this.ifonlyTerminal=ifonlyTerminal;
$this.$httpclient.get("/reminder/getTerminalContacts", {
ifonlyTerminal: $this.ifonlyTerminal
}, function (res) {
if (res.success == true) {
$this.treeData = res.data;
$this.$refs.treeForm.setCheckedKeys(selections);
} else {
$this.$message({
message: 'Initialization failed, network lost...',
type: 'error'
});
}
});
this.isOpen = true;
},
submit() {
let selectionNode = this.$refs.treeForm.getCheckedNodes();
let list = [];
for(let i=0;i<selectionNode.length;i++){
let item = selectionNode[i];
list.push({
id:item.id,
terminalName:item.label,
terminalNum:item.terminalNum,
serialNum:item.serialNum,
terminalType:item.terminalType
});
}
console.log(list);
this.$parent.setTerminals(list);
this.close();
},
close() {
this.isOpen = false;
}
}
}
</script>Reference Component
<template>
<div>
<el-dialog title="Add a scheduled meeting" :visible.sync="addModelOpen" class="el-dialog-large dialogClass">
<div class="forms-menu mar-10">
<div class="forms-menu-tit">
<span>
<i class="ump-caidan flt-l" style="color:#2681ec;font-size:20px;margin-top:-3px;"></i>
Basic Information
</div>
<div class="forms-menu-con par-T10">
<el-row>
<el-form :model="addForm" :rules="rules" ref="addForm" :inline="true" label-position="right">
<div class="el-colum-xs12 block">
<div class="form-group el-display">
<el-form-item label="Theme" prop="title" style="width:1050px;">
<el-input v-model="addForm.title" placeholder="Please enter the subject"></el-input>
</el-form-item>
</div>
</div>
<div class="el-colum-xs12">
<div class="form-group el-display">
<el-form-item label="Start time" prop="startTime" style="margin-top:20px;width:700px;">
<el-date-picker :picker-options="startTimeValid" @change="newValid" v-model="addForm.startTime" type="datetime" format="yyyy-MM-dd hh:mm" value-format="yyyy-MM-dd hh:mm" placeholder="Select the meeting start time"></el-date-picker>
</el-form-item>
</div>
</div>
<div class="el-colum-xs12" style="margin-top:20px;">
<div class="form-group">
<el-form-item label="Meeting duration" prop="meetTime">
<el-select v-model="addForm.meetTimeHour" placeholder="Please select" style="width:100px;">
<el-option label="0" value="0"></el-option>
<el-option label="1" value="1"></el-option>
<el-option label="2" value="2"></el-option>
<el-option label="3" value="3"></el-option>
<el-option label="4" value="4"></el-option>
<el-option label="5" value="5"></el-option>
<el-option label="6" value="6"></el-option>
</el-select>
<span style="margin:0px 10px">Hours</span>
<el-select v-model="addForm.meetTimeMin" placeholder="Please select" style="width:100px;">
<el-option label="0" value="0"></el-option>
<el-option label="10" value="10"></el-option>
<el-option label="20" value="20"></el-option>
<el-option label="30" value="30"></el-option>
<el-option label="45" value="45"></el-option>
<el-option label="50" value="50"></el-option>
</el-select>
<span style="margin:0px 10px">Minutes</span>
</el-form-item>
</div>
</div>
<div class="el-colum-xs12" style="margin-top:20px;">
<div class="form-group">
<el-form-item label="Meeting Details" prop="meetDetails" style="width:700px;">
<el-input type="textarea" :rows="3" v-model="addForm.meetDetails" placeholder="Please enter the meeting summary information..."></el-input>
</el-form-item>
</div>
</div>
<div class="el-colum-xs12 block" style="margin-top:20px;">
<div class="form-group el-display">
<el-form-item label="Participants" prop="noselect" style="width:700px;">
<el-input v-model="terminalNum" placeholder="Please enter your phone number, terminal number, terminal serial number and click the "OK" button to add"></el-input>
<div class="form-search" style="display: inline">
<el-button @click="addTerminal"><i class="el-icon-document-checked" style="font-size:16px;margin-top:6px;"></i>OK</el-button>
<el-button @click="openContactsModel"><i class="el-icon-plus" style="font-size:16px;margin-top:6px"></i>Add/Cancel from address book</el-button>
</div>
<el-checkbox-group v-model="ifonlyTerminal">
<el-checkbox label="A">Terminal only<span style="color:#44b5ff">(This selection will only include terminals, not users)</span></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="Selected terminal/user" prop="terminals" style="width:700px;">
<el-input type="textarea" class="textarea" v-model="terminalsInfo" readonly="readonly"></el-input>
</el-form-item>
</div>
</div>
<!-- <div class="el-colum-xs12 block" style="margin-top:20px;">
<div class="form-group el-display">
<el-form-item label="Participants" prop="name" style="width:700px;">
<el-input v-model="terminalNum" placeholder="Please enter your phone number, terminal number, terminal serial number and click the "OK" button to add"></el-input>
<div class="form-search" style="display: inline">
<el-button @click="addTerminal"><i class="el-icon-document-checked" style="font-size:16px;margin-top:6px;"></i>OK</el-button>
<el-button @click="openContactsModel"><i class="el-icon-plus" style="font-size:16px;margin-top:6px"></i>Add/Cancel from address book</el-button>
</div>
<el-checkbox-group v-model="ifonlyTerminal">
<el-checkbox label="A">Terminal only<span style="color:#44b5ff">(This selection will only include terminals, not users)</span></el-checkbox>
</el-checkbox-group>
<el-input type="textarea" class="textarea" v-model="terminalsInfo"></el-input>
</el-form-item>
</div>
</div> -->
<div class="el-colum-xs12 block" style="margin-top:20px;">
<div class="form-group">
<el-form-item label="Meeting Settings" prop="sex">
<el-checkbox-group v-model="ifAutoRecord">
<el-checkbox label="A"> <span style="color:#44b5ff">Automatically call the participating terminals when the meeting starts</span></el-checkbox><br>
</el-checkbox-group>
<el-checkbox-group v-model="ifAutoCall">
<el-checkbox label="B"> <span style="color:#44b5ff">Automatically record</span></el-checkbox>
</el-checkbox-group>
</el-form-item>
</div>
</div>
<div class="el-colum-xs12 block" style="margin-top:20px;">
<div class="form-group">
<el-form-item label="Select cloud conference room" prop="meetRoomId">
<el-form-item label="" style="width:200px;">
<el-select v-model="addForm.meetRoomId" placeholder="Please select a meeting room">
<el-option v-for=" item in meetRooms" :key="item.id" :label="item.roomName" :value="item.id"></el-option>
</el-select>
</el-form-item>
</el-form-item>
</div>
</div>
<div class="el-colum-xs12 block" style="margin-top:20px;">
<div class="form-group">
<el-col class="form-search colum-center">
<el-button @click="submit" :disabled="isDisabled">
<i class="ump-save" style="font-size:15px;"></i>Save</el-button>
<el-button @click="close">
<i class="ump-quxiao3" style="font-size:16px;"></i>Close</el-button>
<br /><br />
</el-col>
</div>
</div>
</el-form>
</el-row>
</div>
</div>
</el-dialog>
<contacts ref="contactsModel"></contacts>
</div>
</template>
<style>
.dialogClass .el-dialog {
height: 690px;
top: 50%;
margin-top: -369px !important;
}
.dialogClass .el-dialog .el-dialog__body {
height: 670px;
}
</style>
<script>
import dateUtil from '@/common/util.js'
import contacts from "@/components/meet/reminder/contacts";
export default {
components:
Contacts
},
data() {
let $this = this;
let meetTimeTimeValid = function (rule, value, callback) {
if (($this.addForm.meetTimeHour + $this.addForm.meetTimeMin) == 0) {
callback(new Error('Please select the meeting duration'));
}
callback();
}
let terminalsValid = function (rule, value, callback) {
if ($this.addForm.terminals.length == 0) {
callback(new Error('Please select the participating terminal/user'));
}
callback();
}
return {
addModelOpen: false,
terminalNum: "",
ifonlyTerminal: false,
terminalsInfo: "",
ifAutoRecord: false,
ifAutoCall: false,
isDisabled: false,
meetRooms: [],
addForm: {
title: "",
meetRoomId: "",
startTime: "",
roomNum: "",
meetTimeHour: "0",
meetTimeMin: "20",
endTime: "",
meetDetails: "",
ifAutoRecord: "",
ifAutoCall: "",
meetPassWord: "",
controlPassWord: "",
terminals: []
},
rules:
title: [{
required: true,
message: 'Please enter the meeting topic',
trigger: 'blur'
}],
meetRoomId: [{
required: true,
message: 'Please select the cloud conference room',
trigger: 'blur'
}],
startTime: [{
required: true,
message: 'Please select a start time',
trigger: 'blur'
}],
meetDetails: [{
required: true,
message: 'Please enter meeting details',
trigger: 'blur'
}],
meetTime: [{
validator: meetTimeTimeValid,
trigger: 'change'
}],
terminals: [{
validator: terminalsValid,
trigger: 'change'
}]
},
startTimeValid: {
disabledDate: (time) => {
return time.getTime() <= Date.now();
}
}
}
},
mounted() {
console.log("Welcome to the emergency platform - appointment meeting...");
},
methods: {
open() {
let $this = this;
$this.$httpclient.get("/reminder/getMeetRooms", {}, function (res) {
if (res.success == true) {
$this.meetRooms = res.data;
} else {
$this.$message({
message: 'The cloud conference room is not found, the network is lost...',
type: 'warning'
});
}
});
this.addModelOpen = true;
},
close() {
this.addModelOpen = false;
},
newValid(){
this.$refs["addForm"].validateField('startTime');
},
submit() {
let $this = this;
$this.btnStatus = true;
$this.$refs.addForm.validate((valid) => {
if (valid && $this.btnStatus) {
$this.addForm.ifAutoRecord = $this.ifAutoRecord ? 1 : 0;
$this.addForm.ifAutoCall = $this.ifAutoCall ? 1 : 0;
for (let i = 0; i < $this.meetRooms.length; i++) {
let item = $this.meetRooms[i];
if (item.id == $this.addForm.meetRoomId) {
$this.addForm.roomNum = item.roomNum;
}
}
$this.$httpclient.post("/reminder", $this.addForm, function (res) {
$this.btnStatus = false;
if (res.success == true) {
$this.$parent.search();
$this.close();
} else {
$this.$message({
message: '[Network busy],' + res.errorMsg,
type: 'error'
});
}
});
} else {
$this.btnStatus = false;
return false;
}
});
},
openContactsModel() {
let list = [];
for (let i = 0; i < this.addForm.terminals.length; i++) {
let item = this.addForm.terminals[i];
list.push(item.id);
}
this.$refs.contactsModel.open(list, this.ifonlyTerminal ? 1 : 0);
},
/**
* This function will be used in the component end. If you want to change the function name, * modify the line of code *this.$parent.setTerminals(list);* in the calling component to complete the replacement.
* There are other ways, such as passing functions from parent container to child container, etc.
* I still like to use this method, after all, it can save two lines of code, haha~~
*/
setTerminals(terminals) {
this.addForm.terminals = terminals;
let terminalsInfo = "";
for (let i = 0; i < terminals.length; i++) {
let terminal = terminals[i];
terminalsInfo += "『[" + terminal.terminalName + "]-[" + terminal.terminalNum + "]』";
}
this.terminalsInfo = terminalsInfo;
},
addTerminal() {
let $this = this;
let terminals = $this.addForm.terminals;
let flag = true;
for (let i = 0; i < terminals.length; i++) {
let item = terminals[i];
if (item.terminalNum == $this.terminalNum || item.serialNum == $this.terminalNum) {
flag = false;
$this.terminalNum = "";
$this.$message({
message: 'The current terminal has been selected, no need to add it again..',
type: 'warning'
});
break;
}
}
if (flag) {
$this.$httpclient.get('/terminal/getTerminal', {
terminalNum: $this.terminalNum
}, function (res) {
if (res.success == true) {
let terminal = res.data;
terminals.push(terminal);
$this.terminalsInfo += "『[" + terminal.terminalName + "]-[" + terminal.terminalNum + "]』";
$this.terminalNum = "";
} else {
$this.$message({
message: 'The current terminal is not found, please check carefully whether you have entered it correctly..',
type: 'warning'
});
}
});
}
}
}
}
</script>Return Json data format
{
"success": true,
"errorCode": null,
"errorMsg": null,
"data": [{
"label": "\u6E56\u5317\u7701\u8003\u8BD5\u9662",
"id": "17",
"parentId": "17",
"nodeType": 0,
"icon": null,
"kids": [{
"label": "\u9662\u529E\u516C\u5BA4",
"id": "23",
"parentId": "17",
"nodeType": 0,
"icon": null,
"kids": [{
"label": "\u9662\u529E\u516C\u5BA4\u4E00\u5904",
"id": "24",
"parentId": "23",
"nodeType": 0,
"icon": null,
"kids": null
}, {
"label": "\u9662\u529E\u516C\u5BA4\u4E8C\u5904",
"id": "25",
"parentId": "23",
"nodeType": 0,
"icon": null,
"kids": null
}]
}]
}, {
"label": "\u6E56\u5317\u77012020\u5E74\u9AD8\u8003\u5E94\u6025\u673A\u6784",
"id": "18",
"parentId": "18",
"nodeType": 0,
"icon": null,
"kids": [{
"label": "\u4E2D\u5FC3\u94F6\u884C",
"id": "A06E0C6FFB29198EE053437CA8C07A48",
"parentId": "18",
"nodeType": 1,
"icon": "el-icon-monitor",
"kids": null,
"terminalType": 0,
"terminalNum": "769025",
"serialNum": "7D1846124E640764"
}, {
"label": "\u6B66\u6C49\u5E02\u4E00\u4E2D\u8003\u70B9\u5E94\u6025\u529E",
"id": "20",
"parentId": "18",
"nodeType": 0,
"icon": null,
"kids": [{
"label": "\u6B66\u6C49\u4E00\u4E2D\u5E94\u6025\u6307\u6325\u4E2D\u5FC3",
"id": "22",
"parentId": "20",
"nodeType": 0,
"icon": null,
"kids": null
}]
}, {
"label": "\u6B66\u6C49\u4E8C\u4E2D\u8003\u70B9\u5E94\u6025\u529E",
"id": "21",
"parentId": "18",
"nodeType": 0,
"icon": null,
"kids": null
}]
}, {
"label": "2020\u5E74\u7814\u7A76\u751F\u8003\u8BD5\u5E94\u6025\u673A\u6784",
"id": "19",
"parentId": "19",
"nodeType": 0,
"icon": null,
"kids": [{
"label": "\u738B\u7269\u6D41",
"id": "A0BA62D5108D1565E053437CA8C0C74B",
"parentId": "19",
"nodeType": 1,
"icon": "el-icon-user",
"kids": null,
"terminalType": 1,
"terminalNum": "15010330199",
"serialNum": "15010330199"
}, {
"label": "\u6B66\u6C49\u8003\u533A",
"id": "27",
"parentId": "19",
"nodeType": 0,
"icon": null,
"kids": [{
"label": "\u6B66\u6C49\u4E00\u533A\u5E94\u6025\u529E",
"id": "28",
"parentId": "27",
"nodeType": 0,
"icon": null,
"kids": null
}, {
"label": "\u6B66\u6C49\u4E8C\u533A\u5E94\u6025\u529E",
"id": "41",
"parentId": "27",
"nodeType": 0,
"icon": null,
"kids": null
}]
}]
}, {
"label": "\u6E56\u5317\u77012019\u5E74\u9AD8\u8003\u5E94\u6025",
"id": "26",
"parentId": "26",
"nodeType": 0,
"icon": null,
"kids": null
}]
}Background code
package com.itechhero.app.module.edu.meet.reminder.service;
import com.github.pagehelper.PageHelper;
import com.itechhero.app.module.edu.common.model.TreeBean;
import com.itechhero.app.module.edu.meet.reminder.mapper.MeetReminderMapper;
import com.itechhero.app.module.edu.meet.reminder.mapper.ReminderTerminalLinkMapper;
import com.itechhero.app.module.edu.meet.reminder.model.MeetReminder;
import com.itechhero.app.module.edu.meet.reminder.model.ReminderTerminalLink;
import com.itechhero.app.module.edu.meet.reminder.model.TerminalTreeBean;
import com.itechhero.app.module.edu.terminal.mapper.TerminalMapper;
import com.itechhero.app.module.edu.terminal.model.Terminal;
import com.itechhero.app.module.edu.utils.exceptions.ReqException;
import com.itechhero.app.module.edu.utils.req.CMap;
import com.itechhero.app.module.edu.utils.req.PageData;
import com.itechhero.app.module.edu.utils.req.ResBean;
import com.itechhero.app.module.edu.xylink.api.reminder.ReminderApi;
import com.itechhero.app.module.edu.xylink.util.Result;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
/**
* Meeting reservation service* Author: Wu Bo* Time: 2020-03-09 17:28
* Pen name: Eggplant in the autumn of that year^^
*/
@Slf4j
@Service
@Transactional
public class MeetReminderService {
@Autowired
private MeetReminderMapper meetReminderMapper;
@Autowired
private TerminalMapper terminalMapper;
@Autowired
private ReminderTerminalLinkMapper reminderTerminalLinkmapper;
/**
* Get the communication terminal tree * Author: Wu Bo * Time: 2020-03-14 10:32
* Pen name: Eggplant in the autumn of that year^^
*/
public ResBean getContacts(Integer ifonlyTerminal) {
List<TreeBean> root = this.meetReminderMapper.getRootContacts();
getKidContacts(root, ifonlyTerminal);
return ResBean.success(root);
}
/**
* Get the terminal address book subnode* Author: Wu Bo* Time: 2020-03-14 11:07
* Pen name: Eggplant in the autumn of that year^^
*/
private void getKidContacts(List<TreeBean> root, Integer ifonlyTerminal) {
log.info("\n{}", root);
for (TreeBean treeBean : root) {
List<TreeBean> kidsContacts = new ArrayList<>();
/*terminal*/
List<TerminalTreeBean> terminalContacts = this.terminalMapper.getTerminalKidsForTree(treeBean.getId(), ifonlyTerminal);
if (terminalContacts != null && terminalContacts.size() != 0) {
kidsContacts.addAll(terminalContacts);
}
/*department*/
List<TreeBean> orgKidsContacts = this.meetReminderMapper.getKidsContacts(treeBean.getId());
if (orgKidsContacts != null && orgKidsContacts.size() != 0) {
kidsContacts.addAll(orgKidsContacts);
}
if (kidsContacts.size() != 0) {
treeBean.setKids(kidsContacts);
}
getKidContacts(kidsContacts, ifonlyTerminal);
}
}
/**
* Get the selected terminal* Author: Wu Bo* Time: 2020-03-14 21:36
* Pen name: Eggplant in the autumn of that year^^
*/
public ResBean getTerminals(CMap param) {
List<CMap> list=this.reminderTerminalLinkmapper.getTerminals(param);
log.info("\n[Get the terminal device for scheduled conference call]\n{}",list);
return ResBean.success(list);
}
}Mapper.xml
<!-- Get the address book -->
<select id="getRootContacts" resultType="com.itechhero.app.module.edu.common.model.TreeBean">
select
ID||'' AS "id",
YJJGMC AS "label",
FBMID||'' as "parentId",
0 as "nodeType" -- For the front end to determine whether it can be selected FROM YJ_ZB_ZBJG
WHERE 1=1 AND ID=FBMID
</select>
<!-- Get the address book child node-->
<select id="getKidsContacts" resultType="com.itechhero.app.module.edu.common.model.TreeBean">
select
ID||'' AS "id",
YJJGMC AS "label",
FBMID||'' as "parentId",
0 as "nodeType"
FROM YJ_ZB_ZBJG
WHERE 1=1
AND ID||'' != #{parentId}
AND FBMID||'' = #{parentId}
</select>
<!-- Get the terminal address book TREE -->
<select id="getTerminalKidsForTree" resultType="com.itechhero.app.module.edu.meet.reminder.model.TerminalTreeBean">
SELECT
ID as "id",
TERMINAL_NAME as "label",
TERMINAL_TYPE,
TERMINAL_NUM,
SERIAL_NUM,
ORG_ID||'' as "parentId",
1 as "nodeType",
case TERMINAL_TYPE -- Set the icon for the front end (to facilitate direct writing to the database, mind the front end judgment)
when 0 then 'el-icon-monitor'
else 'el-icon-user' end as "icon"
FROM YJ_TERMINAL
where 1=1
and ORG_ID||'' =#{parentId}
<if test="ifonlyTerminal==1">
and TERMINAL_TYPE = 0
</if>
</select>The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: How to install and uninstall IIS7 components using the WIN2008 server command line
Recommend
Detailed tutorial for installing MySQL 8.0.22 on Redhat 7.3 (binary installation)
Table of contents 1. Download the MySQL installat...
Method example of safely getting deep objects of Object in Js
Table of contents Preface text parameter example ...
How to view the IP address of Linux in VMware virtual machine
1. First, double-click the vmware icon on the com...
Detailed explanation of the platform bus of Linux driver
Table of contents 1. Introduction to platform bus...
Introduction to Common XHTML Tags
<br />For some time, I found that many peopl...
A Deeper Look at SQL Injection
1. What is SQL injection? Sql injection is an att...
Summary of Mathematical Symbols in Unicode
There are many special symbols used in mathematic...
In IIS 7.5, HTML supports the include function like SHTML (add module mapping)
When I first started, I found a lot of errors. In...
The latest graphic tutorial of mysql 8.0.16 winx64 installation under win10
In order to download this database, it takes a lo...
MySQL study notes on handling duplicate data
MySQL handles duplicate data Some MySQL tables ma...
Discussion on default margin and padding values of common elements
Today we discussed the issue of what the margin v...
How to install and deploy gitlab server on centos7
I am using centos 7 64bit system here. I have tri...
How to install mysql5.7.24 binary version on Centos 7 and how to solve it
MySQL binary installation method Download mysql h...
A simple way to clear the CSS, JavaScript and background image cache in the browser
In the actual project development process, the pag...
A brief comparison of Props in React
Table of contents Props comparison of class compo...