javascript - 如何在不使用 SVG 图像的情况下使用带有文本的 React 创建圆形/方形？

Question

在不使用 SVG 图像的情况下，使用 React 可以在其中包含自定义文本来创建圆形和方形的方法是什么？一个例子:

我尝试了以下代码，但它没有呈现任何形状:

import React from 'react';

export default function Circle(){
  return(
    <div height="110" width="500">
      <circle
        cx="50"
        cy="55"
        r="45"
        fill="none"
        stroke="#F0CE01"
        strokeWidth="4"
      />
    </div>
  );
 }

Answer 1

您甚至可以使用 div 标签来做到这一点。只需添加 border-radius 即可创建一个圆。

react 示例:https://codesandbox.io/s/shapes-qbf1f

这里是一个快速概览的片段:

.square {
  display: flex;
  width: 100px;
  height: 100px;
  background-color: red;
}

.circle {
  display: flex;
  width: 100px;
  height: 100px;
  background-color: green;
  border-radius: 50%;
}

.text {
  margin: auto;
}

<div class="square">
  <p class="text">Square text</p>
</div>
<div class="circle">
  <p class="text">Circle text</p>
</div>