Question

我的目标是构建一个React组件，该组件呈现一个<rect>元素和一个<text>元素，而<text>元素的作用类似于<rect>的标签。

到目前为止，我已经创建了该组件，该组件可以如下使用：

<RectWithLabel x={} y={} width={} height={} labelColor={}>This is the label</RectWithLabel>

如您所见，RectWithLabel期望使用普通<rect>元素的道具，再加上一些其他定制标签的道具（例如labelColor）。

尽管此实现有很多限制，但最重要的是我无法将props直接添加到作为标签的<text>元素中，除非我将其传递给RectWithLabel然后传递给它创建的<text>元素。问题在于RectWithLabel已经期望<rect>道具，所以我可能有重叠的道具。

因此，既然您知道我想要实现的目标，那么这个问题。我认为最好的解决方案是实现三个组件：ShapeWithLabel，RectShape和LabelShape，如下所示：

<ShapeWithLabel>
  <RectShape x={} y={} width={} height={} ... />
  <LabelShape opacity={} transform={}>This is the label</LabelShape>
</ShapeWithLabel>

基本上，ShapeWithLabel期望有两个（或一个，如果标签不会显示）元素，一个元素为<rect>，另一个元素为<text>。
然后，虽然RectShape期望与<rect>元素具有相同的道具，但LabelShape期望与<text>元素具有相同的道具。这样，我可以轻松地为这两个元素定义不同的属性。

但是！问题还在于，在ShapeWithLabel中，我需要存储有关两个孩子的信息。例如，传递给LabelShape的标签可能不是要显示的标签：标签可能被省略了，因此实际标签可能类似于"This is the l..."。
另外，我需要将标签放置在rect的中心，并且需要基于x元素坐标来计算标签的y和<rect>位置

因此，在ShapeWithLabel中，我需要同时引用由<rect>和<text>创建的RectShape和LabelShape元素。此外，我需要将其他道具传递给LabelShape，例如实际标签和标签坐标。

因此，由于组件的使用方式，render()的{{1}}方法将只是一个简单的ShapeWithLabel（我可以检查两个孩子是一个{{1 }}和一个{this.props.children}，仅此而已。）

你们能帮我解决这个问题吗？我真的对此一无所知。

将道具反应到父组件，并将道具注入到this.props.children

0 个答案: