ConnectionModal 组件
| 亮色 | 暗色 |
|---|---|
|
|
ConnectionModal 组件是一个 React 组件，用于处理与 Neo4j 数据库的连接设置。它提供了一个友好的界面，让用户输入数据库连接详情，并在连接尝试时显示相应的反馈。该组件在需要动态连接 Neo4j 数据库的应用中尤为有用。
连接模态框还配备了一个拖拽区域，供用户上传包含连接信息的文件。该文件可以是您在创建实例时下载的 Aura 凭证文件，亦或是您自行准备的包含连接详情的文件。
接受的文件格式为 .env 或 .txt，文件内容结构如下：
| 名称 | 描述 | 示例 |
|---|---|---|
|
Neo4j 数据库的 URI。理想情况下应包含协议、主机名和端口，但这些字段均为可选，若缺失将使用默认值。 |
neo4j+s://abcd1234.databases.neo4j.io:7687 |
|
您的 Neo4j 用户名 |
neo4j |
|
您的 Neo4j 密码 |
password |
|
数据库名称 |
neo4j |
local.env 文件示例
NEO4J_URI=neo4j://:7687
NEO4J_USERNAME=neo4j
NEO4J_PASSWORD=password
NEO4J_DATABASE=neo4j先决条件
-
请确保在项目中已安装
@neo4j-ndl库，以便使用此ConnectionModal组件。 -
同时请导入
utils/Driver.tsx，因为该文件用于创建到 Neo4j 数据库的驱动连接。
使用
将 ConnectionModal 组件集成到您的应用中，请按以下步骤操作：
-
导入组件
import ConnectionModal from './path/to/ConnectionModal';-
在父组件中添加状态，用于控制模态框的显示以及处理连接状态
const [isModalOpen, setIsModalOpen] = useState(false);
const [connectionStatus, setConnectionStatus] = useState(false);-
使用所需的属性渲染
ConnectionModal组件
<ConnectionModal
open={isModalOpen}
setOpenConnection={setIsModalOpen}
setConnectionStatus={setConnectionStatus}
message={{ type: 'info', content: 'Please enter your database connection details.' }}
/>组件属性 (Props)
ConnectionModal 组件接受以下属性：
| 名称 | 描述 | 必填 |
|---|---|---|
|
一个布尔值状态，指示模态框是打开还是关闭。 |
是 |
|
用于更新上述 |
是 |
|
用于根据连接尝试的成功或失败来更新父组件的连接状态的函数。 |
是 |
|
可选的 |
否 |
(可选) Message 对象结构
{
type: string; // success | info | warning | danger | neutral
content: string; // The message content
}