一般正常来讲Web3ReactProvider在全局配置,代码写上去就能用了,像下面:
<PopClueContext.Provider value={
{}}>
<IntlContext.Provider value={intl}>
<Web3ReactProvider getLibrary={getLibrary}>
<App />
</Web3ReactProvider>
</IntlContext.Provider>
</PopClueContext.Provider>
就可以在页面里获取到provider了。
但是如果要求只在某一个页面用web3,不能设置在全局。
这个时候代码应该是这样的:
<Web3ReactProvider getLibrary={getLibrary}>
<div className={styles['wmx-pass-content-top']}>
...
</div>
</Web3ReactProvider>
在上面的代码中配置了, 但是调用获取provider的时候,又获取不到。
import { useWeb3React } from '@web3-react/core';
const context = useWeb3React<Web3Provider>();
获取不到provider,会报错。
最后怎么解决的呢?
因为最开始代码都放在了一个页面,我们将它分开就可。
import React from 'react';
import { Web3Provider } from '@ethersproject/providers';
import { Web3ReactProvider } from '@web3-react/core';
import App from './app';
const Page = () => {
const POLLING_INTERVAL = 12000;
const getLibrary = (provider): Web3Provider => {
const library = new Web3Provider(provider);
library.pollingInterval = POLLING_INTERVAL;
return library;
};
return (
<Web3ReactProvider getLibrary={getLibrary}>
<App />
</Web3ReactProvider>
);
};
export default Page;
功能代码放在App.tsx文件里
这样就能正常使用了。