Web3ReactProvider获取不到provider

一般正常来讲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文件里

这样就能正常使用了。