前言
在开发 React 项目时，我们经常需要使用到如 React Router、Redux 等第三方库。这些库通常会带来许多优秀且已封装好的组件，但很多时候，我们需要在这些组件的基础上进行扩展或自定义，例如添加一些公共的头部、尾部等。这时，一个好用的 React 组件装载器就显得尤为重要了。
本篇文章将介绍一个好用的 npm 包 — lg-react-mounter，可以为你提供一个可自由拓展的组件装载器，帮助你更好地完成 React 组件的复用和扩展。
安装
你可以通过 npm 安装 lg-react-mounter：
npm install lg-react-mounter --save
安装成功之后，在你的 React 项目中引入该组件：
import React from 'react'; import ReactDOM from 'react-dom'; import LGReactMounter from 'lg-react-mounter';
使用
基本使用
LGReactMounter 组件需要传三个参数：children、components 和 defaultComponent。
children：需要装载的子组件；components：装载组件的配置项；defaultComponent：若未能匹配到对应的装载组件，则默认使用该组件。
下面是一个简单的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ -------------- ---- -------------------
----- -------- - -- -- -
------ ----------------
--
----- --------- - -- -- -
------ -----------------
--
----- ------------ - -- -- -
------ -------- --- ------------
--
----- ---------- - -
- ----- ------- ---------- -------- --
- ----- -------- ---------- --------- --
--
----- ---------------- - -------------
----- --- - -- -- -
------ -
-----
--------------- ----------------------- ------------------------------------
--------- -- --- -------------
--------- -- --- -------------
-----------------
------
--
--
-------------------- --- ---------------------------------当用户访问 http://example.com/login 时，将会渲染 LoginPage；当用户访问 http://example.com/ 时，将会渲染 HomePage；当用户访问未定义的页面时，则会渲染 NotFoundPage。
高级用法
LGReactMounter 组件还可能会接收第四个参数：props，用于传递自定义的组件属性。
在 components 配置项中，除了 name 和 component 外，还可以为该组件设置一个 props 对象，该对象中的属性将会传递给该组件。
示例代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ -------------- ---- -------------------
----- -------- - -- ----- -- -- -
------ -------------------
--
----- ---------- - -
- ----- ------- ---------- --------- ------ - ------ ------ - --
- ----- -------- ---------- --------- --
--
----- ---------------- - -------------
----- --- - -- -- -
------ -
-----
--------------- ----------------------- ------------------------------------
--------- -- --- -------------
--------- -- --- -------------
-----------------
------
--
--
-------------------- --- ---------------------------------当用户访问 http://example.com/ 时，将会渲染 HomePage，该组件的 title 属性为 这是主页。
总结
通过使用 LGReactMounter 组件，我们可以很方便地实现 React 组件的复用和扩展。该组件功能强大，支持自定义传递参数，用户可以根据自己的业务需求进行自由拓展。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055b2081e8991b448d8c88