如何将web3导入React项目
如何将web3导入React项目
提问于 2018-03-21 23:35:02
我对这个非常基本的问题先发制人地道歉。我已经在我的反应项目中添加和安装了使用纱线的web3。在我的index.js文件中，在/scr中，基于web3文档，我尝试了两者(而不是同时)
var Web3 = require("web3");
var web3 = new Web3();和
import Web3 from 'web3';
var web3 = new Web3();在添加之前
if (typeof web3 !== 'undefined') {
web3 = new Web3(web3.currentProvider);
} else {
// set the provider you want from Web3.providers
web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"));
}
web3.eth.getAccounts((error, accounts) => console.log(accounts[0]));最后出现了一个错误，抱怨“无法读取未定义的属性0”导致我认为问题是与帐户0有关。
令人困惑的是，当删除页面顶部的require/import语句并刷新页面时，浏览器检测到元问询并将我的地址打印到控制台。此外，我收到抱怨说我的web3对象是未定义的，但这是预料中的。
我没有明确地运行webpack或浏览，因为webpack包括在反应项目。这是我需要做的事吗？
这里发生了什么，我如何才能让我的React项目与元问题一起工作？
回答 2
Ethereum用户
发布于 2018-08-18 17:32:09
最简单的方法是使用web3 web3-提供者组件。
将Web3Provider添加到根反应性组件中：
import Web3Provider from 'react-web3-provider';
ReactDOM.render(
<Web3Provider
defaultWeb3Provider={
(cb) => cb(new Web3(new Web3.providers.HttpProvider("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);Ethereum用户
发布于 2019-07-06 20:25:36
截至2019年7月，你最好的一张照片是Web3-反应。看看它是如何在联合瓦普中使用的。
偷窥：
function ContextProviders({ children }) {
return (
<ApplicationContextProvider>
<TransactionContextProvider>
<TokensContextProvider>
<BalancesContextProvider>
<AllowancesContextProvider>{children}</AllowancesContextProvider>
</BalancesContextProvider>
</TokensContextProvider>
</TransactionContextProvider>
</ApplicationContextProvider>
)
}
function Updaters() {
return (
<>
<ApplicationContextUpdater />
<TransactionContextUpdater />
</>
)
}
ReactDOM.render(
<ThemeProvider>
<>
...
<Web3Provider connectors={connectors} libraryName="ethers.js">
<ContextProviders>
<Updaters />
<App />
</ContextProviders>
</Web3Provider>
</>
</ThemeProvider>,
document.getElementById('root')
)页面原文内容由Ethereum提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://ethereum.stackexchange.com/questions/43498
复制相关文章
相似问题
腾讯云开发者
