使用React

Question

我是React的新手，我遇到了一些格式化问题。

我有一个反应组件，一个作为背景元素的SVG。在它上面，我试图渲染几个点，当你悬停时注释。

当我直接返回点时，我能够得到要显示的点数，但我需要将它包装在div中，以便我可以添加一些文本。

工作，将该点呈现在正确的位置：

    class InfoPoint extends Component {
      render() {
        return (
          <rect x="10" y="93" width="15" height="12" rx="2" ry="2" fill="red" ></rect>
        );
      }
    }

不能正常工作，当我将它包装在div中时，我找不到该元素：

   class InfoPoint extends Component {
      render() {
        return (
          <div className="point">
          <rect x="10" y="93" width="15" height="12" rx="2" ry="2" fill="red" ></rect>
         </div>
        );
      }
    }

Answer 1

<rect>元素必须位于<svg>元素内。并且<div>元素在<svg>元素中无效。你不能随意混合HTML和SVG元素。