Question

我想在局域网中显示网络设备（即计算机，交换机等及其连接和比特率）。

对于一个简单的示例，这样的事情（实际上问题可能有更多的设备和连接）：

Computer A ----\ 3kb/sec    Computer C
                \          /
                 Switch --/ 4kb/sec
                 /
Computer B -----/ 1kb/sec

我有设备图标，链接状态和比特率值，但我不知道如何有效地显示和管理React项目中的内容。在第一次尝试中，我会静态绘制每个设备并在HTML <svg>标签中进行链接（即，将每个设备绘制在特定坐标下...）。

import React from 'react';

const renderInput = (line, idx) => {
	let l = line.points.reduce(
		(prev, next) =>
			(prev.x && prev.y ? 'M' + prev.x + ',' + prev.y : prev) + ' L' + next.x + ',' + next.y
	);

	return [
		<text
			key={'input-caption'}
			x={line.points[0].x + 3}
			y={line.points[0].y - 3}
			fill={line.caption.fill}
			style={line.caption.style}
		>
			{line.caption.text}
		</text>,
		<defs key={`arrow-${idx}`}>
			<marker id="markerArrow" markerWidth="13" markerHeight="13" refX="3" refY="6" orient="auto">
				<path d="M2,4 L2,8 L5,6 L2,4" style={{ fill: '#2dc408' }} />
			</marker>
		</defs>,
		<path
			key={`line-${idx}`}
			d={l}
			style={{
				stroke: '#2dc408',
				strokeWidth: '2px',
				fill: 'none',
				// markerStart: "url(#markerCircle)",
				markerEnd: 'url(#markerArrow)'
			}}
		/>
	];
};

const renderInputs = inputs => {
	const result = inputs.map((line, idx) => renderInput(line, idx));
	return result;
};

const Asset = ({ asset, inputs }) => {
	const renderedInputs = renderInputs(inputs);

	return [
		renderedInputs,
		<image
			key={'logo-img'}
			href={asset.icon}
			x={asset.logo.location.x}
			y={asset.logo.location.y}
			height={asset.logo.size.height}
			width={asset.logo.size.width}
		/>,
		<text
			key={'asset-name'}
			x={asset.caption.location.x}
			y={asset.caption.location.y}
			fill={asset.caption.fill}
			style={asset.caption.style}
		>
			{asset.caption.text}
		</text>
	];
};

export default Asset;

如您在上面的代码中看到的，我在asset道具中获得了设备的位置和名称，并在input道具中获得了其链接，以将其绘制在屏幕上。

此方法存在以下问题。

结果不响应
它不灵活（即用户无法缩放/放大或扩展/展开网络拓扑以获取所需的视图）
管理设备和链接是繁琐的工作

如何在反应中显示网络拓扑和状态？

0 个答案: