反应-将大型表格分为多个部分

Question

我的大表格包含30-40个字段。

该表格在逻辑上和视觉上都分为几部分。例如：“地址详细信息”“信用卡详细信息”。我想将其分为多个React组件。

在我的表单中，用户在某些部分进行更改通常会导致其他部分进行更改。一些更改是：

1. 重置表单的某些部分。
2. 自动填写表格的某些部分（例如，对于某些信用卡，我们会自动提供过去交易中保存的地址）
3. 重新运行不同部分的有效性检查（例如，我们仅将购买金额为100美元或更多的商品运送到该地址）

据我所知，React的父级不应调用子级的函数（通过ref），而应声明状态，该状态通过prop流向子级。但是，提到的所有更改都只是初始状态，可以由用户输入立即覆盖。

据我了解，我的选择是：

1. 必须将状态传递给孩子。这可以通过ref或通过属性“初始/覆盖值”来完成。无论哪种方式，我都是手动传递状态，而不是只有一个事实来源。

2. 让我的孩子形成“哑巴”，并从父母那里接收所有表单值。 （据我所知），这似乎是不切实际的，因为我将不得不向上传递每个输入值，并将所有输入值作为道具接收。

   1. 类似于2，将状态存储在Redux中。我仍然必须将表单的每个值都存储在存储中，这很麻烦。React社区也不建议这样做。

   2. 放弃将表格划分为多个子组件。老实说，我只有一个事实来源（组件状态），这似乎是目前最好的解决方案。

你会怎么做？

感谢您的宝贵时间。