在 React 开发过程中，我们经常需要按照一定的顺序渲染多个组件，例如实现一个步骤条或者一个表单向导。但是，React 默认情况下是无序渲染的，需要开发者手动设置。
本篇文章将介绍一个 npm 包 react-render-in-series，它可以轻松实现有序渲染多个组件。
安装
在项目根目录下执行以下命令：
npm install react-render-in-series
使用方法
首先在需要使用的文件中导入 react-render-in-series：
import RenderInSeries from 'react-render-in-series';
然后在渲染的过程中使用 RenderInSeries 组件，将需要有序渲染的组件放到 RenderInSeries 的 components 属性中：
<RenderInSeries components={[Component1, Component2, Component3]} />我们假设需要实现一个简单的表单向导，包含两个步骤，每个步骤都由一个表单组件组成。代码如下：
-- -------------------- ---- -------
------ -------------- ---- -------------------------
------ ----- ---- ----------
------ ----- ---- ----------
----- ---------- ------- --------------- -
-------- -
------ -
--------------- ------------------- ------- --
--
-
-
------ ------- -----------上面的代码中，先渲染 Form1 组件，再渲染 Form2 组件。
高级用法
RenderInSeries 组件还支持传入 props，使渲染的组件可以接受到传入的参数。例如，我们可以传入一个名为 onSubmit 的函数给 Form1，当 Form1 表单提交时调用它：
-- -------------------- ---- -------
------ -------------- ---- -------------------------
------ ----- ---- ----------
------ ----- ---- ----------
----- ---------- ------- --------------- -
---------- -
------------------ ------------
-
-------- -
------ -
--------------- ------------------- ------- -------- --------- ------------- -- --
--
-
-
------ ------- -----------修改 Form1 组件，让它的表单提交时调用传入的 onSubmit 函数：
-- -------------------- ---- -------
----- ----- ------- --------------- -
-------- -
------ -
----- -------------------------------
--- ---- ---
-------
--
-
-现在，当 Form1 表单提交时，会先打印出 Form1 submitted。
结语
使用 react-render-in-series 这个 npm 包，能够方便地实现多个组件有序渲染的效果，节省了开发者手动控制渲染顺序的时间和精力。同时，在高级用法中使得组件之间的通信变得简单易行。
希望本文能对学习 React 前端开发的同学们有所帮助。完整示例代码见 GitHub。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600572c481e8991b448e8dc2