如何在 Drizzle React 中編寫組件？

這些組件用於以下功能：

function tokenURI(uint256 _tokenId) public view returns (string) {  
   require(exists(_tokenId));  
   return tokenURIs[_tokenId];
}


function ownerOf(uint256 _tokenId) public view returns (address) {
  address owner = tokenOwner[_tokenId];
   require(owner != address(0));
   return owner;
}


function exists(uint256 _tokenId) public view returns (bool) {
   address owner = tokenOwner[_tokenId];
   return owner != address(0);


function tokenOfOwnerByIndex(address _owner, uint256 _index)
   public view returns (uint256) {
   require(_index < balanceOf(_owner));
   return ownedTokens[_owner][_index];
}

這些是我完成 dapp 所需的最後一個組件，我不知道如何編寫它們。

這是項目的 home.js 供參考：

import React, { Component } from 'react'
import { AccountData, ContractData, ContractForm } from 'drizzle-react-   components'
import web3 from './web3'
import luxuryjewel from './luxuryjewel'



class Home extends Component {
 state = {
   balance: '',
   value: '',
   message: '',
   designer_: '',
   price: '',
   supply: ''
 };

 async componentDidMount() {
   const balance = await web3.eth.getBalance(luxuryjewel.options.address);
   const designer_ = await luxuryjewel.methods.designer().call();
   const price = await luxuryjewel.methods.getCurrentPrice().call();
   const supply = await luxuryjewel.methods.totalSupply().call();

   this.setState({ balance, designer_, price, supply });

 }

onSubmit = async (event) => {
 event.preventDefault();

 const accounts = await web3.eth.getAccounts();

 this.setState({ message: 'Waiting on transaction success...'});

 await luxuryjewel.methods.buyToken().send({
   from: accounts[0],
   value: web3.utils.toWei(this.state.value, 'ether')
});

 this.setState({ message: 'The Jewel is yours!'});
};


 render() {

   return (

       <main className="container">
       <div className="pure-u-1-1">
         <h2>Luxury Jewel Contract</h2>
         <br/>
         <br/>
         <h3>Your Active Account</h3>
         <AccountData accountIndex="0" units="ether" precision="3" />
         <br/>
         <strong>Administrator Address:</strong> <ContractData   contract="LuxuryJewel" method="owner" hideIndicator />
         <br/>
         <br/>
         <strong>Name:</strong> <ContractData contract="LuxuryJewel"    method="name" hideIndicator />
         <br/>
         <br/>
         <strong>Symbol:</strong> <ContractData contract="LuxuryJewel"  method="symbol" hideIndicator />
         <br/>
         <br/>
         <strong>Designer:</strong> <ContractData contract="LuxuryJewel"  method="designer" hideIndicator />
         <br/>
         <br/>
         <strong>Limited Edition:</strong> <ContractData  contract="LuxuryJewel" method="limited_edition" hideIndicator />
         <br/>
         <br/>
         <strong>Total Supply:</strong> <ContractData contract="LuxuryJewel"  method="totalSupply" />
         <br/>
         <br/>
         <strong>Price:</strong> {''} {web3.utils.fromWei(this.state.price,  'ether')} ether
         <br/>
         <br/>
         <strong>Set Price:</strong>
         <br/>
         <ContractForm contract="LuxuryJewel" method="setCurrentPrice" />
         <br/>
         <br/>
         <strong>Safe Transfer From:</strong>
         <br/>
         <ContractForm contract="LuxuryJewel" method="safeTransferFrom" />
         <br/>
         <br/>
         <strong>My Token Balance:</strong> <ContractData  contract="LuxuryJewel" method="balanceOf" methodArgs={[this.props.accounts[0]]}    />
         <br/>
         <br/>
         <strong>Contract Balance:</strong> {''}  {web3.utils.fromWei(this.state.balance, 'ether')} ether
       </div>
         <br/>
         <br/>

       <form onSubmit={this.onSubmit}>
         <h4>Buy The Jewel Token</h4>
         <div>
           <label><strong>Price:</strong> {''}  {web3.utils.fromWei(this.state.price, 'ether')} ether
           <br/>
           Enter the price amount in the field  </label>
           <input
             value={this.state.value}
             onChange={event => this.setState({ value: event.target.value  })} />
          </div>
          <button>Buy</button>
       </form>
          <hr/>
          <h1>{this.state.message}</h1>
          <br/>
          <br/>
       </main>
   );
 }
}

export default Home;

我不確定我是否有問題，但此時 Drizzle 不支持具有 methodArgs 屬性的 ContractForm。關於它有多個問題

1. https://github.com/trufflesuite/drizzle-react-components/issues/2
2. https://github.com/trufflesuite/drizzle-react-components/issues/17

您可以編寫自己的組件來解決問題。

引用自：https://ethereum.stackexchange.com/questions/59595