一、在页面上获取合约信息
(1)在App.js中导入合约实例。
// 导入合约实例
let contractInstance = require('./eth/lottery')
(2)定义一个App类,继承Component,并提供componentWillMount()和render函数。
import React, {Component} from 'react';
// 导入合约实例
let contractInstance = require('./eth/lottery')
class App extends Component {
constructor() {
super()
}
// 在页面渲染前自动执行
async componentWillMount() {
console.log("执行 componnetWillMount方法...")
}
// 渲染页面
render() {
console.log("执行render方法...")
return (
<div>
<p>Hello React!!!</p>
</div>
);
}
}
export default App;
(3)在构造函数中定义状态变量。
constructor() {
super()
this.state = {
manager : '',
winner : '',
round : 0,
balance : 0,
players : [],
playerCounts : 0
}
}
(4)在componentWillMount函数中调用合约实例方法,初始化状态变量。
// 在页面渲染前自动执行
async componentWillMount() {
console.log("执行 componnetWillMount方法...")
let manager = await contractInstance.methods.getManagerAddress().call()
let winner = await contractInstance.methods.getWinner().call()
let round = await contractInstance.methods.getRound().call()
let balance = await contractInstance.methods.getAmount().call()
let players = await contractInstance.methods.getPlays().call()
this.setState({
manager,
winner,
round,
balance,
players,
})
}
(5)修改render函数,把状态变量的值输出到页面上。
// 渲染页面
render() {
return (
<div>
<p>Hello React!!!</p>
<p>manager : {this.state.manager}</p>
<p>winner : {this.state.winner}</p>
<p>round : {this.state.round}</p>
<p>balance : {this.state.balance}</p>
<p>players : {this.state.players}</p>
</div>
);
}
(5)测试。
第一步:打开remix,在At Address输入框中输入合约地址,找到该合约,然后再进行投注、开奖操作。
第二步:启动React,在浏览器上输入localhost:3000,如果在页面上以下效果,就代表测试成功。
二、搭建界面
(1)下载semantic-ui-react和semantic-ui-css模块。
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^0.83.0"
(2)在semantic官方文档中查找card视图,找到后点击Try it并复制代码。
(3)把复制代码粘贴到display/ui.js文件中。
import React from 'react'
import { Card, Icon, Image } from 'semantic-ui-react'
const CardExampleCard = () => (
<Card>
<Image src='/images/avatar/large/matthew.png' wrapped ui={false} />
<Card.Content>
<Card.Header>Matthew</Card.Header>
<Card.Meta>
<span className='date'>Joined in 2015</span>
</Card.Meta>
<Card.Description>
Matthew is a musician living in Nashville.
</Card.Description>
</Card.Content>
<Card.Content extra>
<a>
<Icon name='user' />
22 Friends
</a>
</Card.Content>
</Card>
)
// 在ES6语法中,如果使用export导出,那么就要使用import导入
export default CardExampleCard
(4)新建一个logo图片,然后保存在public/images目录下。
(5)修改logo图片的路径。
<Image src='/images/logo.jpg' wrapped ui={false} />
(6)在App.js文件中导入ui.js页面, 然后在render方法中创建CardExampleCard。
import CardExampleCard from './display/ui';
....
render() {
return (
<div>
<CardExampleCard/>
<p>Hello React!!!</p>
<p>manager : {this.state.manager}</p>
<p>winner : {this.state.winner}</p>
<p>round : {this.state.round}</p>
<p>balance : {this.state.balance}</p>
<p>players : {this.state.players}</p>
</div>
);
}
(7)在index.js中导入CSS。
import 'semantic-ui-css/semantic.min.css'
(8)测试代码,界面如下图所示:
三、向页面添加数据
(1)修改ui.js文件。
第一步:从semantic-ui-react库中导入Statistic。
import { Statistic } from 'semantic-ui-react'
第二步:获取CardExampleCard函数参数props,把props中的数据分别展示在界面上。
const CardExampleCard = (props) => (
<Card>
<Image src='/images/logo.jpg' wrapped ui={false} />
<Card.Content>
<Card.Header>福利彩票广州站</Card.Header>
<Card.Meta>
<p>管理员:{props.manager}</p>
<p>当前用户:{props.currentPlayer}</p>
</Card.Meta>
<Card.Description>
每晚八点准时开奖, 不见不散!
</Card.Description>
</Card.Content>
<Card.Content extra>
<a>
<Icon name='user' />
{props.playerCount} 人参与
</a>
</Card.Content>
<Card.Content extra>
<Statistic color='red'>
<Statistic.Value>{props.balance}ETH</Statistic.Value>
<Statistic.Label>奖金池</Statistic.Label>
</Statistic>
</Card.Content>
<Card.Content extra>
<Statistic color='blue'>
<Statistic.Value>第{props.round}期</Statistic.Value>
<a href='#'>点击我查看交易历史</a>
</Statistic>
</Card.Content>
</Card>
)
(2)修改App.js文件
第一步:导入InitWeb3。
let web3 = require('./utils/InitWeb3')
第二步:在构造函数中,添加currentPlayer状态变量。
constructor() {
super()
this.state = {
manager : '',
...
currentPlayer : ''
}
}
第三步:在componentWillMount函数中,设置状态变量的值。
async componentWillMount() {
...
let balanceWei = await contractInstance.methods.getAmount().call()
//从wei单位转换为'ether'单位
let balance = web3.utils.fromWei(balanceWei, 'ether')
let players = await contractInstance.methods.getPlays().call()
let playerCount = await players.length
let allPlayers = await web3.eth.getAccounts()
this.setState({
manager,
winner,
round,
balance,
players,
playerCount,
currentPlayer : allPlayers[0]
})
}
第四步:修改render方法,在CardExampleCard元素中为每一个状态变量添加对应的属性。这些属性会保存在CardExampleCard函数的props参数中。
<CardExampleCard
manager = {this.state.manager}
currentPlayer = {this.state.currentPlayer}
playerCount = {this.state.playerCount}
balance = {this.state.balance}
round = {this.state.round}
/>
(3)测试代码,效果如下图所示: