如何在第3方组件内插入自定义组件？

Question

我正在使用第3方组件，但需要扩展其功能。第三方组件具有一个提交按钮，该按钮通过回调道具将该组件内部的用户输入发送给我。我想扩展可用的输入，从而在回调中接收其他数据。

我做了this JSFiddle来说明问题。在这段代码中，<Notes/>是我要扩展的第三方组件。单击发送按钮时，它将用户输入发送到props.onReceiveNotes提供的回调中。我想添加一个重复输入元素/组件并将其值一起发送。

为此，我直接修改DOM以添加我的 Repeat输入。然后，在回调中，搜索 Repeat输入以获取其值。

我的尝试有几个缺点：

1. 我需要直接操作DOM，这可能会使React的呈现混乱。
2. 无论何时安装<Notes/>，我都必须仔细插入 Repeat input 组件。
当我在今天的笔记和明天的笔记（即{{1}）之间切换时，
3. 我的重复输入没有重新初始化为1。 }已更新，但未重新安装）

因此，我的问题是：

如何以标准的React方法实现这一目标，而又不直接操纵DOM和上面提到的缺点？

谢谢。