在 React 中集成来自 Metamask 的 web3答案

【问题标题】：Integrating web3 from Metamask in React在 React 中集成来自 Metamask 的 web3
【发布时间】：2018-08-13 09:51:08
【问题描述】：

我是 ReactJS 的新手。似乎无法在 React 中集成来自 Metamask 的 web3。元掩码版本：web3@1.0.0-beta.34

import Web3 from 'web3'

let web3;

window.addEventListener('load', function () {
    if (typeof window.web3 !== 'undefined') {        
        web3 = new Web3(window.web3.currentProvider);
    } else {
        // No web 3 provider
        console.log("Please install Metamask");
    }    
});

export default web3;

得到以下错误：

window is not defined
ReferenceError: window is not defined
    at Object../lib/getWeb3.js (lib/getWeb3.js:5:0)

【问题讨论】：

标签： reactjs ethereum web3

【解决方案1】：

window 未在服务器上定义，仅在客户端的浏览器中定义，因此您不能在服务器端使用 MetaMask。但是，当您想在 React 组件服务器端使用 web3 或不支持 MetaMask 时，您可以连接到 INFURA。

最简单的方法是使用react-web3-provider组件。

将 Web3Provider 添加到您的根 React 组件：

import Web3Provider from 'react-web3-provider';

ReactDOM.render(
    <Web3Provider
        defaultWeb3Provider="https://mainnet.infura.io/YOUR_API_KEY"
        loading="Loading..."
    >
        <App />
    </Web3Provider>
)

然后在要使用 Web3 的组件中：

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

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

        web3.eth.getAccounts(console.log);

        // Version 1.0.0-beta.35
        return "Web3 version: {web3.version}";
    }
}

export default withWeb3(MyComponent);

【讨论】：

我最终尝试了 Infura，但不知道 react-web3-provider。谢谢。