как импортировать несколько компонентов как один компонент и использовать их в режиме отложенной загрузки - PullRequest
Новая
       35

как импортировать несколько компонентов как один компонент и использовать их в режиме отложенной загрузки

2 голосов
/ 26 апреля 2020

У меня есть состояние, когда у меня есть 3 компонента

A. js B. js C. js

В старом коде

маршруты. js

const A = lazy(() => import("../test/A")); 
const B = lazy(() => import("../test/B")); 
const C = lazy(() => import("../test/C"));


<Route
  path="/test"
  render={({ match: { url } }) => (
    <Switch>
      <Route exact path={`${url}/a-test`} component={A} />
      <Route exact path={`${url}/b-test`} component={B} />
      <Route exact path={`${url}/c-test`} component={C} />
    </Switch>
  )}
/>

Чего я хочу достичь

С помощью приведенного выше кода мы можем заключить, что каждый раз, когда отдельные сборки для A, B, C будут загружаться из-за отложенной загрузки, но я хочу получить функциональность, в которой я могу загрузить все 3 из них в целом, т.е. при загрузке одного компонента с использованием только этого я могу загрузить все три из них как отдельную отдельную сборку

Что я пробовал - Новый код

объединить_модуль. js

import A from "./A";
import B from "./B";
import C from "./C";


const test = {A, B, C};

export default test;

маршруты. js

const Test = lazy(() => import("../test/combine_module")); 

<Route
  path="/test"
  render={({ match: { url } }) => (
    <Switch>
      <Route exact path={`${url}/a-test`} component={Test.A} />
      <Route exact path={`${url}/b-test`} component={Test.B} />
      <Route exact path={`${url}/c-test`} component={Test.C} />
    </Switch>
  )}
/>

код

Полный код ссылки

Мой выпуск

Я не знаю о подходе, правильно это или правильно так как я не получаю никаких ошибок или предупреждений, связанных с этим, в консоли, но см. На пустом экране не виден вывод , поэтому, может, кто-нибудь подскажет, как все исправить и добиться желаемой функциональности.

1 Ответ

1 голос
/ 26 апреля 2020

Согласно документации React.lazy :

React.lazy принимает функцию, которая должна вызывать динамический c import (). Это должно вернуть Обещание, которое разрешается в модуль с экспортом по умолчанию, содержащим компонент React.

Таким образом, результат React.lazy не является модулем, а может работать со специальным объектом Suspense.

Обычный модуль можно загружать лениво с помощью dynamici c import WebPack. С этим есть сложная часть, потому что модуль может быть загружен после рендеринга компонента. Итак, две вещи, которые нам нужно сделать:
1) убедиться, что компонент не отображается undefined во время загрузки модуля
2) обновить компонент после загрузки модуля

Обновление достаточно просто мы можем сделать зацепку, которая установит модуль как состояние при загрузке 

function useDynamicModule(path) {
  const [module, setModule] = useState({});
  const [error, setError] = useState();
  useEffect(() => {
    import(path).then(setModule, setError);
  }, []);
  return error ? { $error: error } : module.default
}

Использование: 

export default function App() {
  const Test = useDynamicModule("./CombineModule");

  if (!Test) return null;
  if (Test.$error) return "Error";
  return (
    <Router history={history}>
      // ...
    </Router>
  );
}

Детская площадка

...