react 画一个小圆点

在React中，你可以使用内置的HTML元素`<svg>`或者第三方库如`react-icons`来绘制小圆点。这里是一个简单的例子，我们将使用SVG：

import React from 'react';

function SmallDot() {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
      <circle cx="8" cy="8" r="4" fill="#FF0000" />
    </svg>
  );
}

export default SmallDot;

这个组件会渲染一个红色的小圆点，其中心坐标为(8, 8)，半径为4。如果你想让它更具交互性，可以添加事件监听。

如果你想要更现代一些，也可以考虑使用CSS样式来自定义圆点：

import React from 'react';
import './SmallDot.css'; // 假设在另一个文件中有`.dot { ... }`的样式

function SmallDot() {
  return <div className="dot" />;
}

export default SmallDot;

然后在`.dot` CSS类中定义圆点样式：

.dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: red;
}