reactjs - 在 React 中正确传递和操作父子组件之间的分层数据

Question

我对 React 非常陌生，并且在我当前的项目中，我希望显示从数据库中获取的分层数据，并让用户能够使用各种子组件更改它的不同部分。

作为一个愚蠢的例子，考虑以下 JSON：

export const myData = [
    {
        Id: 1,
        Name: "John Bustos",
        Location: "USA",
        Assets: [
            {
                Category: {
                    Type: "Food"
                    Items: [
                        {
                            Item: 
                                {
                                    Name: "Hamburger",
                                    Status: "In Fridge"
                                },
                            Item: 
                                {
                                    Name: "Grapes",
                                    Status: "In Fridge"
                                },
                        }
                    ]
                }
                Category: {
                    Type: "Clothing"
                    Items: [
                        {
                            Item: 
                                {
                                    Name: "Sweater",
                                    Status: "In Laundry"
                                },
                            Item: 
                                {
                                    Name: "Jeans",
                                    Status: "In Hamper"
                                },
                        }
                    ]
                }
            }
        ]
    }
]

所以，在我的项目中，我会：

1. 显示顶级数据的父组件 ( Name, Location)
2. Food包含 2 个资产类别 ( & Clothing)中的每一个的子组件
3. 包含每个类别中的每个项目的子子组件（Hamburger&Grapes出现在Food; Sweater&Jeans内Clothing）

我已经能够使用子组件显示数据并从父组件向下传递 JSON，但是我的问题在于试图使用户可以添加新Categories的或删除当前存在的内容以及拥有相同的内容Items每个类别中的附加/删除能力。

根据我对 React 的了解，我相信我需要让父组件（实际上获取这个 JSON 对象）具有操作 JSON 的功能（例如：、、、、addCategory）并传递它们removeCategory，以及相关的部分JSON 到孩子，然后将其传递给子孩子。addItemremoveItem

这似乎是我过度耦合我的组件，如果我有第三级孩子我需要这样做，情况会变得更糟，但我不知道/想不出应该如何正确完成。

这是正确的方法吗？如果不是（我猜不是），正确的方法是什么？

标签： reactjsnestedcomponents