从开发 React 应用的经验来看，经常会有需要在父组件中调用子组件的方法。然而，React 并没有提供一个明确的方式来做这件事情，因此需要借助一些技巧来完成这个需求。其中之一就是使用 npm 包 hoist-react-instance-methods。
hoist-react-instance-methods 是什么
hoist-react-instance-methods 是一个用于 React 的高阶组件（Higher-Order Component，HOC），它的主要功能是自动将 React 组件实例的方法“提升”到父组件的作用域中。这样做的好处是：
- 可以在父组件中直接调用子组件的方法，而不需要通过 props 的方式传递
- 子组件无需关注父组件需要的方法，专注于自身的职责
如何使用 hoist-react-instance-methods
首先，在命令行中执行以下命令安装 hoist-react-instance-methods：
npm install --save hoist-react-instance-methods
然后，在需要使用的组件文件中引入该 npm 包：
import hoistReactInstanceMethods from 'hoist-react-instance-methods';
接着，将需要“提升”的子组件作为 hoistReactInstanceMethods 的参数传递进去：
const MyComponent = hoistReactInstanceMethods(ChildComponent);
最后，使用 MyComponent 替换原本的 ChildComponent：
render() {
return <MyComponent />;
}示例代码
为了更好地理解 hoist-react-instance-methods 的使用方法，下面给出一个具体的代码示例。
-- -------------------- ---- -------
------ ------------------------- ---- -------------------------------
----- -------------- ------- --------------- -
------------------ -
-------------
---------- - -
------ -
--
-------------- - --------------------------
-
----------- -
--------------- ------ ---------------- - - ---
-
-------- -
------ -
-----
-----------------------
--------- ----------------------
------
--
-
-
----- --------------- ------- --------------- -
------------------ -
-------------
---------------------- - ------------------
-
------------- -
-------------------------------------------
-
-------- -
----- ---------------- - ------------------------------------------
------ -
-----
------------------------
------- ----------------------------------------------- --------------
----------------- ---------------------------- --
------
--
-
-在上面的示例中，ChildComponent 有一个 increment 方法，用于增加 state 属性 count 的值。为了在 ParentComponent 中调用该方法，需要使用 hoist-react-instance-methods 将 ChildComponent 的实例方法“提升”到 ParentComponent 的作用域内。然后，在 ParentComponent 中使用 ref 对 ChildComponent 进行引用，就可以在 handleClick 方法中直接调用 increment 方法了。
总结
使用 hoist-react-instance-methods 这个 npm 包，可以很方便地在 React 组件间传递方法调用。同时，这种做法也避免了在子组件中编写“逆向”prop drilling 代码的问题。但需要注意的是，在组件嵌套层数较深的情况下，会影响程序的执行效率，因此需要谨慎使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005574d81e8991b448d444e