Reactjs 从旧版（普通JS）应用程序重新加载React组件

在遗留web应用程序中，我们尝试逐步引入React。我们的第一个组件是一个日期选择器，它只有一个具有初始值的道具：

这在基本情况下很有效

现在，我们希望在列出多个事件的事件列表页面上使用该组件。如果用户单击某个事件，则会显示一个小编辑器对话框，可以在其中编辑事件日期。事件日期位于如下数据属性中：

<div class="event" data-event-date="2020-08-15">...</div>
<div class="event" data-event-date="2020-09-25">...</div>
<div class="event" data-event-date="2020-10-07">...</div>

。。。
...
...

请注意，此页面使用纯JavaScript，因此将为所有事件项分配一个简单的单击事件处理程序。此事件处理程序显示带有DatePicker React组件的对话框

---

如何使用指定给所选事件的日期值重新加载DatePicker组件？

这里是一个非常快速的模型。您需要实现更健壮的检查，并且显然要根据您的代码库调整细节，但这说明了基本的香草/反应交互

let DATE=null；
函数确认（{date}）{
返回(
{日期(
)：null
}
);
}
函数日期选择器（{date}）{
返回(
{date}
);
}
函数设置日期（e）{
DATE=e？e.target.getAttribute（'data-event-DATE'）：空；
render（，document.getElementById（“根”））；
}
document.queryselectoral（'.event'）.forEach（el=>el.addEventListener（'click'，（e）=>setDate（e）））
render（，document.getElementById（“根”））
#容器{
保证金：8px自动；
}
btn{
背景颜色：灰色；
边框：1px纯黑；
填充：4px；
利润率：8px；
}
.日期选择器{
填充：8px；
利润率：8px；
背景颜色：绿色；
}

2020-08-15
2020-09-25
2020-10-07
清楚的