简介
Redraft是一个用于将富文本编辑器的数据转化为React组件的库，它的灵感来自于Facebook的 draft-js 库。
Redraft提供了一个简单易用的API，可以将draft-js的ContentState转换为适合渲染的React组件。其设计理念为：将ContentState的纯数据结构转化为能够在React中渲染的React元素并保留draft-js中的所有特性，方便在前端开发中使用。
安装
你可以通过npm安装redraft：
$ npm install redraft
使用
Redraft使用起来相对简单。我们可以看一下它的使用流程。
准备工作
在使用Redraft之前，我们需要先将我们的富文本编辑器数据转为draft-js的ContentState。ContentState是draft-js中描述编辑器数据的核心数据结构，我们可以通过draft-js的一些API来构造和操作这个数据结构。以示例内容作为例子，我们可以将其转化为以下的ContentState数据结构：
-- -------------------- ---- -------
-
--------- -
-
------ --------
------- ------- --------
------- -----------
-------- --
-------------------- -
-
--------- --
--------- --
-------- ------
-
-
-
--
------------ --
-将ContentState转换为React组件
有了ContentState数据，我们就可以将其转换为React组件了。Redraft提供了一个函数 render 用于将ContentState转换为React组件。示例代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- ----------
----- ------------ - -
--------- -
-
------ --------
------- ------- --------
------- -----------
-------- --
-------------------- -
-
--------- --
--------- --
-------- ------
-
-
-
--
------------ --
--
----- ------------------- - -- -- -
-----
----------------------
------
--
------ ------- --------------------在这段代码中，我们创建了一个名为MyRenderedComponent的组件，在组件中使用render函数将ContentState转换为React组件并渲染在页面中。
高级用法
上面的代码演示了Redraft的基本用法，下面介绍一下它的高级用法。
渲染配置项
除了默认的渲染配置外，Redraft还支持自定义渲染配置。在渲染中使用配置项时，可以通过配置项来控制渲染的行为，比如设置内联样式的前缀和后缀等。示例代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- ----------
----- ------------ - -
--------- -
-
------ --------
------- ------- --------
------- -----------
-------- --
-------------------- -
-
--------- --
--------- --
-------- ------
-
-
-
--
------------ --
--
----- ------- - -
------------ ------- -- -
------ ------- -
---- -------
------ ------- ---
--------
------ -----
-
-
--
----- ------------------- - -- -- -
-----
--------------------- ---------
------
--
------ ------- --------------------在这个例子中，我们创建了一个名为options的配置项，在渲染时将其作为第二个参数传入了render函数中。配置项中定义了内联样式的渲染方式，如果纯文本数据中出现了BOLD等样式，就将其渲染为<strong>标记。
自定义组件类型
Redraft默认将内容块按照draft-js中的类型映射成了一套默认的HTML标签组合，但是我们也可以通过自定义组件将其转化为我们的React组件。示例代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- ----------
----- ------------ - -
--------- -
-
------ --------
------- ------- --------
------- ---------
-------- --
-------------------- -
-
--------- --
--------- --
-------- ------
-
-
-
--
------------ --
--
----- ------- - -
------------ -
------- -- -------- -- -- -
-----
---- -- - ------ ------
----------
------
-
-
--
----- ------------------- - -- -- -
-----
--------------------- ---------
------
--
------ ------- --------------------在这个例子中，我们定义了tions对象，其中定义了一个名为customBlock的键，值是一个对象，可以自定义渲染不同类型的block，我们定义了一个名为CUSTOM的渲染方法，在redraft渲染时，如果发现一个type为CUSTOM的block，就将其渲染为我们自己定义的组件。
总结
在本文我们通过介绍Redraft的基本使用和高级用法，了解了如何将draft-js的ContentState转换为可嵌套渲染的React组件。Redraft提供了简单易用的API，在富文本编辑器或其他前端开发中，将ContentState转换为React组件是非常常见的需求，掌握Redraft可以为我们在前端开发中解决这些问题提供方便。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066ffee361a36e0bce8a4d