React-do 是一个方便快捷的 React 组件库，提供了众多常用组件和工具，如按钮、表单、日历等。本文将介绍如何使用 React-do，包括安装、基本使用和一些高阶用法。
安装
可以通过 npm 包管理器安装最新的 React-do 包。打开终端执行以下命令：
npm install --save react-do
基本使用
在使用前先将所需的组件引入进来。例如，引入一个按钮组件：
import React from 'react';
import { Button } from 'react-do';
function MyButton() {
return <Button>Click me!</Button>;
}也可以通过命名导入的形式引入多个组件：
import { Button, Input, Calendar } from 'react-do';这些组件和其它 React 组件一样，可被包含在 JSX 中：
-- -------------------- ---- -------
-------- ----- -
------ -
-----
------------- ------------
------ ----------------- ---------- --
--------- --
------
--
-组件还可以接收一些属性，比如按钮的样式、禁用状态等：
function MyButton() {
return (
<Button variant="secondary" disabled>
Submit
</Button>
);
}属性的含义可以查看组件文档。
高阶用法
React-do 还提供了许多高阶用法，如表单验证、动态加载等。下面介绍两个常用的例子。
表单验证
React-do 中的表单组件可支持内置的表单验证。例如，将输入框与提示文本组合成一个表单并进行验证：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ----- ------ ----- - ---- -----------
-------- -------- -
----- ------- --------- - -------------
----- ------- --------- - -------------
-------- --------------- -
-------------------------
-
-------- -------------- -
-- ------ --- ------ -
---------------- ------- --------
-------
-
-------------
----------- ------------
-
------ -
----- ------------------------
------ ------------- ----------------------- --
------ -- ------ ---------------------------------
------- -----------------------------
-------
--
-上面的代码中，Form 组件将所有表单组件包含在内，并且表单提交时，会进行输入框的验证，若验证不通过会显示错误信息。
动态加载
有时候某些组件不是必须的，可以在需要时才动态加载。这可以通过使用 lazy 和 Suspense 组件实现：
-- -------------------- ---- -------
------ ------ - ----- -------- - ---- --------
----- ----------- - ------- -- -------------------------
-------- ----- -
------ -
-----
----------- -- -- ---------
--------- ---------------------------------
------------ --
-----------
------
--
-上面代码中，MyComponent 组件是一个动态加载的懒加载组件，只有在需要时才被加载。
总结
React-do 提供了许多实用的组件和工具，能够显著地提高 React 开发的效率。本文简单介绍了 React-do 的基本使用和一些高阶用法，希望对读者有所帮助。详细的组件文档可在官方网站中查看。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005681081e8991b448e4311