如何有效地了解组件层次结构内部的特殊组件

Question

我正在使用React创建一个表单生成器。

关键是，一切都是动态的。

表单可以有字段或字段组。每个字段组可以有许多字段。每个字段都可以有自己的控件、提示、赋值等。

这意味着表单是一个组件层次结构。组件树。

现在我想知道在这个树中，是否存在任何Upload字段。

因为如果没有Upload字段，那么我将使用application/json内容类型提交表单。否则，我将使用application/form-data内容类型提交表单。

我知道我可以遍历组件道具的整个JSON。但这似乎效率很低。

有没有一种方法可以有效地遍历React的组件树？

Answer 1

您可以通过使用contextApi或其挂钩React Version>16.8使用上下文
阅读React官方文档中的更多信息

我的建议是使用formik npm包来正确轻松地构建表单，formik使用上下文来管理后台的状态
我建议它用于经常使用的表单，而不是像在企业中那样具有许多字段(最大25-30(的重表单。
您可以在此处阅读更多关于formik的信息：https://formik.org/docs/api/formik
formik还有另一种替代品，在react using forms中也很流行：
react form hook：https://react-hook-form.com/
我还没有使用它，但据我所知，它比formik有一些优点/缺点。

Answer 2

最简单的方法是香草JS。

const FORM_SELECTOR = '#some-form-id';
const UPLOAD_SELECTOR = '.some-upload-class';
const form = document.querySelector(FORM_SELECTOR)
if(form.querySelectorAll(UPLOAD_SELECTOR).length) {
// upload exists
} else {
// upload does not exist
}