react.js 前端 web3通过antd 在React dapp中构建订单组件基本结构

上文web3 dapp React项目引入 antd 对 balance 用户token信息组件进行样式改造中我们导入 antd组件算是比较完整的编写了用户资产组件那么今天开始我们就要说订单组件了这个就会比之前的复杂很多我们还是先开环境 ganache 终端执行

ganache -d

然后将合约发布到区块链上项目终端执行

truffle migrate --reset

然后我们执行一下我们之前写的测试文件向交易所转入一些ETH和token

truffle exec .\scripts\test.js

然后登录 MetaMask 最后运行我们的 react dapp项目订单组件不是一次性能讲完的因为确实比较复杂本文我们先将整个订单组件的结构搭起来

这里我们打算分三部分展示首先是所有被交易完成的订单这个所有人都可以看到然后是当前用户创建的订单这里只有当前自己创建的才能看到这里就要有取消订单的操作最后是别人正在执行的订单我们也可以操作交易因为涉及到不同区块操作所以这里我们要用redux来存储所以这篇文章我们只搭建界面结构下一文我们再来处理数据层的逻辑

这里我还是打算利用卡片式的展示方式我们找到 src下 components 下的 Order.jsx 组件编写代码如下

import React from 'react';

import { Card, Col, Row } from 'antd';

export default function Order() {

return (

Card content

);

}

这里我们还是用的 antd的 Col 卡片然后title是我们标题里面就是内容因为这是 24三格模式就是 span 达到 24就会盛满整个屏幕所以我们三个每个就是 8 三个正好是整个屏幕我们运行代码整个的界面效果就出来了

但是这里数据的展示 p 显然满足不了我们我还是希望用表格组件

我们打开antd官方文档找表格组件这里我们先要从antd 引入Table组件然后案例中 columns 是表格的列名称 dataSource则是每行的数据我懒得写了直接复制过来最后将表格替换掉原来p标签的位置运行结果如下这个表格组件要特殊说一下他是根据dataIndex匹配的参考代码如下

import React from 'react';

import { Card, Col, Row ,Table } from 'antd';

export default function Order() {

const dataSource = [

{

key: '1',

name: '胡彦斌',

age: 32,

address: '西湖区湖底公园1号',

{

key: '2',

name: '胡彦祖',

age: 42,

address: '西湖区湖底公园1号',

];

const columns = [

{

title: '姓名',

dataIndex: 'name',

key: 'name',

{

title: '年龄',

dataIndex: 'age',

key: 'age',

{

title: '住址',

dataIndex: 'address',

key: 'address',

];

return (

Card content

);

}

这里我们表头设置 title名字为姓名设dataIndex为 name 这样后面每一行的namp都会自动匹配到这一列上就是这样一个效果这里我们改一下表头的字段名我们这里订单只需要展示创建时间 ETH和GrToken 告诉他什么时候创建的然后徐多少对多少 token 就好了然后我们将其他几个都换成 Table组件这样我们项目就像个样子了

评论可见，请评论后查看内容，谢谢！！！