【问题标题】:Accessing web3 prop from react-web3-provider从 react-web3-provider 访问 web3 属性
【发布时间】:2019-01-07 18:42:08
【问题描述】:

我无法使用 [react-web3-provider][1] 的基本功能

我像这样围绕组件的根:

import React, {
  Component
} from "react"

import {
  withWeb3
} from 'react-web3-provider';

import Web3 from 'web3';
import Web3Provider from 'react-web3-provider';

class App extends Component {
  render() {
    return ( <
      Web3Provider defaultProvider = {
        (cb) => cb(new Web3(new Web3.providers.HttpProvider("https://mainnet.infura.io/YOUR_API_KEY")))
      }
      loading = "Loading..."
      error = {
        (err) => `Connection error: ${err.message}`
      } >
      <div className = "App" >
      <NavBar / >
        </div>
      </ Web3Provider >
    )
  }
}


export const NavBar = props => {
  const { web3 } = props
  return (
    <nav>
      <ul>
        <li>
          {" "}
          <Link> Partial f </Link>{" "}
        </li>
        <li>
          {" "}
          <Text.span> Wallet Address: {web3.eth.wallet[0]} </Text.span>{" "}
        </li>
      </ul>
    </nav>
  )
}

export default withWeb3(NavBar)
<script src="https://github.com/ethereum/web3.js/blob/develop/lib/web3.js"></script>
<script src="https://github.com/hussy-io/react-web3-provider/blob/master/src/index.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

但是,我不确定我应该如何从道具中获取web3,因为按照他们的文档,没有道具从父组件传递到子组件。

如何获取web3的实例,如:

 class MyComponent {
    render() {
        const { web3 } = this.props;
....

【问题讨论】:

    标签: javascript reactjs web3


    【解决方案1】:

    文档中有withWeb3 HOC

    import { withWeb3 } from 'react-web3-provider';
    
    class MyComponent {
        render() {
            const { web3 } = this.props;
    
        }
    }
    
    export default withWeb3(MyComponent);
    

    【讨论】:

    • 谢谢,我知道这一点,但很难让它发挥作用。
    • 您介意演示一下如何将它与上面的NavBar 等函数表达式一起使用吗?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2018-09-20
    • 2022-09-30
    • 2022-10-22
    • 2020-08-25
    • 2019-12-12
    • 1970-01-01
    • 2020-12-27
    相关资源
    最近更新 更多