React.js 是一个流行的前端框架，它提供了一种适用于构建交互式用户界面的声明式编程模型。在 React 中，组件是构建应用程序的基本单元。
在开发大型应用程序时，我们常常需要重复使用一些常见的功能或布局。在这种情况下，我们可以利用 React 的组件包装技术来提高代码的可重用性和可维护性。
组件包装
组件包装是一种将一个或多个现有组件封装在另一个组件中的技术。这使得我们能够将组件的结构、样式和行为拆分成更小的部分，并以这种方式重用它们。
以下是一个示例组件包装，其中包含一个通用的登录表单和一个可扩展的标题组件：
-- -------------------- ---- -------
------ ----- ---- --------
-------- ----------- -------- -- -
------ -
----- --------------------
-------
------
------ ------------ ------------ -------- --
--------
-------
---------
------ --------------- --------------- -------- --
--------
------- ----------------------------
-------
--
-
-------- ------- -------- -- -
------ --------------------
-
-------- ------ ------ -------- -- -
------ -
--
----------------------
----------
---
--
-
-------- ----------- -
----- ------------ - ------- -- -
-----------------------
-- ------ ----- -----
--
------ -
----- --------------
---------- ----------------------- --
-------
--
-
------ ------- ----------在这个示例中，我们封装了 LoginForm 和 Title 组件，并将它们合并到了一个更高级别的 Page 组件中。LoginPage 组件使用 Page 包装 LoginForm 和 Title。
转发 Ref
随着组件包装的嵌套层数增加，我们可能需要在父组件中访问子组件的 DOM 元素或实例。React 提供了 ref 属性来实现这一点。但是，在包装组件中使用 ref 时，我们需要注意转发 ref。
转发 ref 是一种技术，允许我们在一个包装组件中向下传递 ref 到其子组件。通过使用 forwardRef 函数和 useImperativeHandle 钩子，我们可以轻松地实现这一点。
以下是一个示例代码，其中 Parent 组件将 ref 转发到 Child 组件：
-- -------------------- ---- -------
------ ------ - ----------- ------------------- - ---- --------
----- ----- - ------------------ ---- -- -
------------------------ -- -- --
------ -- -- -
-- ----- -----
--
----
------ ------ ----------- ---
---
----- ------ - -- -- -
----- -------- - -------------
----- ----------- - -- -- -
-------------------------
--
------ -
--
------ -------------- --
------- --------------------------- --------------
---
--
--在这个示例中，Child 组件包装了 input 元素，并使用 useImperativeHandle 钩子向下转发了 ref。Parent 组件使用 useRef 钩子创建一个引用 childRef，并将其传递给 Child。在 handleClick 函数中，我们通过 childRef.current.focus() 访问 Child 中的 DOM 元素。
总结
组件包装是一种重要的技术，在 React.js 中可以提高代码的可重用性和可维护性。转发 ref 是一个必须掌握的技巧，它允许我们在包装组件中向下传递 ref 到其子组件。
希望本文能够对你学习和应用 React.js 中的组件包装技巧有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/10262