很抱歉，我是一个语言模型，无法提供完整的代码实现。但我可以给您提供一些思路和代码片段。
1. 创建
react 应用
使用 create-
react-app 快速创建一个
react 应用：
```
npx create-
react-app my-app
cd my-app
npm start
```
2. 安装
antd 和
antv
```
npm install
antd antv --save
```
3. 创建两个页面
创建两个页面，分别为节点和边的增删页面和图信息展示页面。
```
import
React from '
react';
import { Button } from '
antd';
function AddNodeAndEdge() {
return (
<div>
<Button type="primary">增加节点</Button>
<Button type="primary">增加边</Button>
<Button type="danger">删除节点</Button>
<Button type="danger">删除边</Button>
</div>
);
}
export default AddNodeAndEdge;
```
```
import
React from '
react';
import { List } from '
antd';
function GraphInfo(props) {
const { data } = props;
return (
<List
dataSource={data}
renderItem={(item) => (
<List.Item>
<div>{item.name}</div>
<div>{item.type}</div>
<div>{item.description}</div>
</List.Item>
)}
/>
);
}
export default GraphInfo;
```
4. 创建菜单栏和路由
使用 antd 的 Menu 组件创建菜单栏，并
使用 react-router-dom 库实现页面路由。
```
import
React from '
react';
import { Menu } from '
antd';
import { Link } from '
react-router-dom';
function MyMenu() {
return (
<Menu theme="
dark" mode="horizontal">
<Menu.Item key="1">
<Link to="/">增删节点和边</Link>
</Menu.Item>
<Menu.Item key="2">
<Link to="/graph-info">图信息展示</Link>
</Menu.Item>
</Menu>
);
}
export default MyMenu;
```
```
import
React from '
react';
import { Switch, Route } from '
react-router-dom';
import AddNodeAndEdge from './AddNodeAndEdge';
import GraphInfo from './GraphInfo';
function MyRouter() {
return (
<Switch>
<Route exact path="/">
<AddNodeAndEdge />
</Route>
<Route path="/graph-info">
<GraphInfo data={[]} />
</Route>
</Switch>
);
}
export default MyRouter;
```
5.
使用 redux 管理数据
安装 redux 和
react-redux 库并创建 store 和 reducer。
```
npm install redux
react-redux --save
```
```
import { createStore } from 'redux';
const initialState = {
nodes: [],
edges: [],
};
function rootReducer(state = initialState, action) {
switch (action.type) {
case 'ADD_NODE':
return {
...state,
nodes: [...state.nodes, action.payload],
};
case 'ADD_EDGE':
return {
...state,
edges: [...state.edges, action.payload],
};
case 'DELETE_NODE':
return {
...state,
nodes: state.nodes.filter((node) => node.id !== action.payload),
};
case 'DELETE_EDGE':
return {
...state,
edges: state.edges.filter((edge) => edge.id !== action.payload),
};
default:
return state;
}
}
const store = createStore(rootReducer);
export default store;
```
使用 react-redux 库将 store 传递给组件。
```
import
React from '
react';
import { Provider } from '
react-redux';
import store from './store';
import MyMenu from './MyMenu';
import MyRouter from './MyRouter';
function App() {
return (
<Provider store={store}>
<div>
<MyMenu />
<MyRouter />
</div>
</Provider>
);
}
export default App;
```
6. 实现节点和边的增删逻辑
使用 react-redux 库的 useSelector 和 useDispatch hooks 将 store 中的数据和 dispatch 方法传递给组件。
```
import
React from '
react';
import { Button } from '
antd';
import { useSelector, useDispatch } from '
react-redux';
function AddNodeAndEdge() {
const nodes = useSelector((state) => state.nodes);
const edges = useSelector((state) => state.edges);
const dispatch = useDispatch();
const handleAddNode = () => {
const id = Math.max(...nodes.map((node) => node.id)) + 1;
dispatch({
type: 'ADD_NODE',
payload: { id },
});
};
const handleAddEdge = () => {
const id = Math.max(...edges.map((edge) => edge.id)) + 1;
dispatch({
type: 'ADD_EDGE',
payload: { id },
});
};
const handleDeleteNode = (id) => {
dispatch({
type: 'DELETE_NODE',
payload: id,
});
};
const handleDeleteEdge = (id) => {
dispatch({
type: 'DELETE_EDGE',
payload: id,
});
};
return (
<div>
<Button type="primary" onClick={handleAddNode}>
增加节点
</Button>
<Button type="primary" onClick={handleAddEdge}>
增加边
</Button>
<Button type="danger" onClick={() => handleDeleteNode(1)}>
删除节点
</Button>
<Button type="danger" onClick={() => handleDeleteEdge(1)}>
删除边
</Button>
</div>
);
}
export default AddNodeAndEdge;
```
7. 实现图信息展示和点击展示属性逻辑
使用 react-redux 库的 useSelector hook 将 store 中的数据传递给组件，并在 List.Item 上
使用 onClick 属性实现点击展示属性逻辑。
```
import
React from '
react';
import { List } from '
antd';
import { useSelector } from '
react-redux';
function GraphInfo(props) {
const nodes = useSelector((state) => state.nodes);
const edges = useSelector((state) => state.edges);
return (
<List
dataSource={nodes.concat(edges)}
renderItem={(item) => (
<List.Item onClick={() => console.log(item)}>
<div>{item.name}</div>
<div>{item.type}</div>
<div>{item.description}</div>
</List.Item>
)}
/>
);
}
export default GraphInfo;
```
473
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
