简介
在前端开发中，我们经常需要展示化学结构等复杂且具体的图形。而 react-chemdoodle-web 就是一个基于 ChemDoodle Web Components 开发的 npm 包，提供了方便的展示和编辑化学结构和分子的功能。
本篇文章将为大家详细介绍如何使用 react-chemdoodle-web 包，包括其基本用法、常用组件等。同时，为了更好地帮助大家理解，我们将配合实例代码来进行讲解。
安装
首先，我们需要先安装 react-chemdoodle-web 包。可以通过以下命令进行安装：
npm install react-chemdoodle-web --save
基本用法
安装完成后，我们就可以开始在项目中使用 react-chemdoodle-web 包了。在使用之前，我们需要首先导入该包：
import ReactChemdoodleWeb from 'react-chemdoodle-web';
组件
在 react-chemdoodle-web 中，提供了多种不同的组件，用于展示和编辑不同种类的化学结构和分子。其中，最常用到的组件有 Molecule 和 Sketcher。下面将为大家详细介绍这两个组件的使用方法。
Molecule 组件
Molecule 组件用于展示一个化学分子。通过 src 属性设置要展示的分子的化学式字符串，如下所示：
<ReactChemdoodleWeb.Molecule src="C1=CC=CS1" />
在上述代码中，我们展示了一个化学式为 C1=CC=CS1 的分子。如果需要修改该分子，可以指定 width 和 height 属性来设置其展示宽度和高度。
Sketcher 组件
Sketcher 组件用于展示和编辑化学结构和分子。通过 value 属性设置当前编辑器中初始化的结构或分子的化学式字符串，如下所示：
<ReactChemdoodleWeb.Sketcher value="CCO" width={500} height={400} />在上述代码中，我们展示了一个初始化值为 CCO 的分子编辑器，并指定其宽度和高度为 500 和 400。如果需要获取当前编辑器中的结构或分子，可以监听 onChange 事件来获取其值。
<ReactChemdoodleWeb.Sketcher
value="CCO"
width={500}
height={400}
onChange={(value) => console.log(value)}
/>其他用法
除了上述介绍的两个组件以外，react-chemdoodle-web 还提供了许多其他的用法，包括：
Canvas组件：用于绘制化学式和结构；IO组件：用于读写不同种类的文件。
更多详情，请参考 react-chemdoodle-web 官方文档。
示例代码
最后，我们来看一个完整的实例，演示如何使用 react-chemdoodle-web 和 Sketcher 组件来展示和修改一个分子。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ------------------ ---- -----------------------
------ ------- -------- ------------------ -
----- ------- --------- - ----------------
----- -------------- - ------- -- -
----------------
--
------ -
-----
--- -------------------------- -------------
----------------------------
-------------
-----------
------------
-------------------------
--
-------------------
------
--
-在上述代码中，我们首先导入了 ReactChemdoodleWeb 包，并定义了一个 MoleculeSketcher 组件。该组件中包含了一个 Sketcher 组件，用于展示和编辑分子，以及一个 p 标签，用于展示当前分子。
通过 useState 钩子函数，我们定义了一个名为 value 的状态变量，用于存储当前分子的值。同时，我们定义了一个 handleOnChange 函数，用于监听 Sketcher 组件的值变化事件，并更新当前分子的值。
最后，我们将 Sketcher 组件和 p 标签渲染到组件中，用于展示和修改当前分子。
总结
通过以上的介绍，我们已经学习了如何在前端项目中使用 react-chemdoodle-web 包，并能够使用其中的 Molecule 和 Sketcher 组件来展示和编辑分子和结构。希望大家能够通过本文的学习，更好地应用该技术，提升自己的项目开发能力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056e9e81e8991b448e7634