以太坊彩票DAPP实战（三）
一、在页面上获取合约信息
（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 (
Hello React！！！
);
}
}
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 (
Hello React!!!
manager : {this.state.manager}
winner : {this.state.winner}
round : {this.state.round}
balance : {this.state.balance}
players : {this.state.players}
);
}（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 = () => (
Matthew
Joined in 2015
Matthew is a musician living in Nashville.
)
// 在ES6语法中，如果使用export导出，那么就要使用import导入
export default CardExampleCard（4）新建一个logo图片，然后保存在public/images目录下。
（5）修改logo图片的路径。
（6）在App.js文件中导入ui.js页面， 然后在render方法中创建CardExampleCard。
import CardExampleCard from './display/ui';
....
render() {
return (
Hello React!!!
manager : {this.state.manager}
winner : {this.state.winner}
round : {this.state.round}
balance : {this.state.balance}
players : {this.state.players}
);
}（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) => (
福利彩票广州站
管理员：{props.manager}
当前用户：{props.currentPlayer}
每晚八点准时开奖, 不见不散!
{props.balance}ETH
奖金池
第{props.round}期
点击我查看交易历史
)（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参数中。
（3）测试代码，效果如下图所示：
