连接模态组件

浅色 深色
DesktopConnectionModalLight
DesktopConnectionModalDark

连接模态组件是一个 React 组件，旨在处理与 Neo4j 数据库的连接设置。它提供了一个用户友好的界面，用于输入数据库连接详细信息，并显示连接尝试的反馈。此组件在需要动态连接到 Neo4j 数据库的应用程序中特别有用。

链接到实时预览

链接到组件代码

连接模态还带有拖放区，供用户上传包含连接详细信息的文件。文件可以是您在创建实例时下载的 Aura 凭据文件，也可以是包含连接详细信息的自定义文件。

接受的文件格式为 .env 或 .txt 文件，结构如下

名称 描述 示例

NEO4J_URI

Neo4j 数据库的 URI。理想情况下，您应该有协议、主机名和端口，但所有这些都是可选的，如果不存在，将默认值。

neo4j+s://abcd1234.databases.neo4j.io:7687

NEO4J_USERNAME

您的 neo4j 用户名

neo4j

NEO4J_PASSWORD

您的 neo4j 密码

password

NEO4J_DATABASE

数据库名称

neo4j

local.env 文件示例

NEO4J_URI=neo4j://localhost:7687
NEO4J_USERNAME=neo4j
NEO4J_PASSWORD=password
NEO4J_DATABASE=neo4j

先决条件

  • 确保您的项目中安装了 @neo4j-ndl 库，才能使用此 ConnectionModal 组件。

  • 确保您也导入了 utils/Driver.tsx，因为它用于创建与 Neo4j 数据库的驱动程序连接。

用法

要将连接模态组件集成到您的应用程序中，请按照以下步骤操作

  1. 导入组件

import ConnectionModal from './path/to/ConnectionModal';

  1. 向父组件添加状态，以控制模态的可见性并处理连接状态

const [isModalOpen, setIsModalOpen] = useState(false);
const [connectionStatus, setConnectionStatus] = useState(false);

  1. 使用所需的 props 呈现 ConnectionModal 组件

<ConnectionModal
  open={isModalOpen}
  setOpenConnection={setIsModalOpen}
  setConnectionStatus={setConnectionStatus}
  message={{ type: 'info', content: 'Please enter your database connection details.' }}
/>

组件 Props

连接模态组件接受以下 props

名称 描述 必需

打开

指示模态是打开还是关闭的布尔状态。

是

setOpenConnection

用于更新上面 open 状态的函数。

是

setConnectionStatus

用于根据连接尝试的成功或失败来更新父组件的连接状态的函数。

是

消息？

一个可选的 Message 对象，包含一个 type 用于对横幅进行样式化（成功、信息、警告、危险、中性）和一个 content 字符串用于消息文本。

否

(可选) 消息对象结构

{
  type: string; // success | info | warning | danger | neutral
  content: string; // The message content
}

关键组件

处理状态

该组件使用 useState 钩子来管理每个连接参数（协议、主机名、端口等）和连接消息的本地状态，以提供反馈。

提交连接详细信息

提交表单后

  1. 它使用选定的协议、主机名和端口构造连接 URI。

  2. 它调用 setDriver 来尝试数据库连接。

  3. 根据 setDriver 的成功或失败，它会更新连接状态，并可能关闭模态或显示错误消息。