简介
React-dash-boilerplate 是一个基于 React 和 Plotly.js 开发的仪表盘快速开发框架。它提供了一组简单但功能强大的组件来构建可互动的仪表板。使用该仪表板开发不需要相当的 JavaScript 知识或者大量的样式代码，而可以轻松地快速得到一个带有各种变量、类型、颜色和风格的仪表板。
安装
要使用 react-dash-boilerplate，您需要使用 npm 包管理工具，并在项目中安装该包。使用以下命令：
npm install react-dash-boilerplate
使用
设置
首先，你需要引入 react-dash-boilerplate 包。你可以使用 import / require 语句来引用它。以下是一个简单的使用示例：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ -------- ---- ------------ ------ ---- ---- ------------------------- ----- ------ - --- ------- ---- ------ ---- ----- ------- - --- ------- ---- ------- ---- ---------------- ----- --------------- ----------------- --- ------------------------------------ --
上面的代码中，我们通过 ReactDOM.render() 方法来实例化 Dash 组件。我们需要传递一个布局和组件列表作为 props。
组件
一个组件包含一个图表和相关的导航控件。一个典型的组件如下所示：
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- -------------
------ - ---- - ---- ------------------
------ - ------ - ---- ------------------
----- --------- - -
----- -----------------------------------------------
------ ----------------------------
-------- --------------------------
--
----- ------------ - -
----- ---
------ ---
-------- -- -- ---
--
----- --------------- ------- --------------- -
-------- -
----- - ----- ------ ------- - - -----------
------ -
-----
----------------
----- -------- -- ----- ----- --------- --- --
------- ----------------------- -------------
------
--
-
-
------------------------- - ----------
---------------------------- - -------------我们可以在 Dash 组件中使用该组件。所需的属性（如数据、标题和点击处理程序）将被从 Dash 父组件传递给子组件。
布局
布局决定了组件的排列方式。React-dash-boilerplate 的布局分为栅格布局和流布局两种。以下是栅格布局的示例：
-- -------------------- ---- -------
----- ------ - -
----- -------
----- --
-------- --
--------- -
- --------- --- --- ---------- ------------------ ------ - ------ ------- --- ----- --- -- -- - --
- --------- --- --- ---------- ------------------ ------ - ------ ------- --- ----- --- -- -- - --
- --------- --- --- ---------- ------------------ ------ - ------ ------- --- ----- --- -- -- - --
- --------- --- --- ---------- ------------------ ------ - ------ ------- --- ----- ---- --- --- - --
- --------- --- --- ---------- ------------------ ------ - ------ ------- --- ----- ---- --- --- - --
- --------- --- --- ---------- ------------------ ------ - ------ ------- --- ----- ---- --- --- - --
--
--以上是一个使用栅格布局的简单的示例。它包含 6 个子组件，每个组件都有一个位置和一个组件名称。位置是一个数组，包含行和列的索引数字。组件名称与我们之前定义的组件相同。
另一种布局是流布局。以下是一个流布局的示例：
-- -------------------- ---- -------
----- ------ - -
----- -------
------------ -----------
--------- -
- ---------- ------------------ ------ - ------ ------- --- ----- --- -- -- - --
- ---------- ------------------ ------ - ------ ------- --- ----- --- -- -- - --
- ---------- ------------------ ------ - ------ ------- --- ----- --- -- -- - --
--
--这个布局是垂直的流布局，并包含 3 个子组件。它们将依次从上到下分布在面板内。
总结
React-dash-boilerplate 是一个非常有用的工具，可用于快速地开发仪表板，特别是当你需要快速启动一个仪表板时。它提供了许多组件和布局选项，以适应各种仪表板的需求。希望这篇文章能帮助你更快、更好地开发仪表板。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005596081e8991b448d6cbf