前言
React Inline Editable HOC 是一个实现行内编辑的高阶组件，它可以方便地帮助我们生成可编辑的文本或者其他类型的内容。使用 React Inline Editable HOC，我们可以在页面上快速构造可编辑的表格、列表等内容。
安装
使用 React Inline Editable HOC，需要先在项目中安装：
npm install react-inline-editable-hoc
用法
React Inline Editable HOC 提供了一个名为 withInlineEditing 的高阶组件，我们可以在需要使用的组件中使用该高阶组件。该高阶组件会通过 props 将是否可编辑状态以及修改内容时的回调函数进行传递。
用法示例如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----------------- ---- ----------------------------
----- ----------- ------- --------------- -
----- - -
----- ------ --------
--
---------------- - ------ -- -
--------------- ---- ---
--
-------- -
----- - ---------- ------------ - - -----------
----- - ---- - - -----------
------ -
-----
---------- - -
------
-----------
------------
------------- -- --------------------------------------
--
- - -
-------------------
--
------- --------------------------------- - ------ - ----------------
------
--
-
-
------ ------- -------------------------------在该示例中，我们使用 withInlineEditing 包装了一个文本显示组件。在该组件中，我们通过判断 isEditing 属性来决定显示哪些元素。如果 isEditing 为 true，我们会显示一个文本输入框，允许用户修改内容。当用户点击保存后，我们调用 onEditToggle 回调函数通知父组件保存修改内容，并将 isEditing 改为 false。
API
withInlineEditing(Component)
将被包装的组件转换为可编辑组件。
参数
Component（required）：将被包装的组件。
返回值
返回新的组件，该组件包含：
isEditing：一个 Boolean 类型的属性，表示当前是否处于编辑状态。onEditToggle：一个回调函数，用于切换编辑状态。
结语
React Inline Editable HOC 为我们提供了一种方便的创建可编辑内容的方式。通过使用该高阶组件，我们可以更加轻松地构造可编辑的文本、表格、列表等内容，为用户提供更好的交互体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cd581e8991b448e66db