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://localhost: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);-
使用所需的属性 (props) 渲染
ConnectionModal组件
<ConnectionModal
open={isModalOpen}
setOpenConnection={setIsModalOpen}
setConnectionStatus={setConnectionStatus}
message={{ type: 'info', content: 'Please enter your database connection details.' }}
/>组件属性 (Props)
ConnectionModal 组件接受以下属性 (props)
| 名称 | 描述 | 必需 |
|---|---|---|
|
一个布尔状态，指示模态框是打开还是关闭。 |
是 |
|
一个用于更新上述 |
是 |
|
一个用于根据连接尝试的成功或失败来更新父组件连接状态的函数。 |
是 |
|
一个可选的 |
否 |
(可选) Message 对象结构
{
type: string; // success | info | warning | danger | neutral
content: string; // The message content
}