javascript - 导出提供者函数和附着对象

Question

我有这个I18n代码:

import { I18nextProvider } from 'react-i18next';
import LngDetector from 'i18next-browser-languagedetector';
import i18n from 'i18next';

import common_en from "../locales/en/common.json";
import common_sv from "../locales/sv/common.json";

i18n
  .use(LngDetector)
  .init({
    resources: {
      en: {
        common: common_en
      },
      sv: {
        common: common_sv
      },
    },
  });

上面的代码像这样包装根应用程序:

document.addEventListener('DOMContentLoaded', () => {
  var root = document.getElementById('root');
  render(
    <I18nextProvider i18n={i18n}>
        <App/>
    </I18nextProvider>,
    root,
  )
})

此模式将在代码中重复多次(整个应用程序中实例化了许多 React Apps)。有什么方法可以导出第一部分，以便可以使用如下内容:

render(
  <ExportedI18nextProvider>
      <App/>
  </ExportedI18nextProvider>,
  root,
)

Answer 1

//ExportedI18nextProvider.js

export default class ExportedI18nextProvider extends React.Component{

    render(){
        var root = document.getElementById('root');
        return(
            <I18nextProvider i18n={i18n}>
                 {this.props.children} //children prop accessed here i.e. App Component
            </I18nextProvider>
        )
    }
}

在这里可以导入它以重用代码。

import ExportedI18nextProvider from 'some_path_to_ExportedI18nextProvider';

document.addEventListener('DOMContentLoaded', () => {

    render(
        <ExportedI18nextProvider>
            <App/>//this will be passed as children prop
        </ExportedI18nextProvider>,
        root,
      )
  })