如何更新包含数组和子对象的动态对象的值

Question

我正在尝试将动态HTML页面编辑器转换为reactjs。我有一个对象，它包含页面的所有设置，例如根据视图的背景颜色，字体大小。听到你可以看到我的物品：-

const defaultPageData = {
  view: [
    {
      type: "view",
      property: {
        height: "70%"
      },
      child: [
        {
          type: "row",
          property: {},
          child: [
            {
              type: "column",
              property: {
                mobile: 16,
                tablet: 16,
                computer: 16,
                largeScreen: 16,
                widescreen: 16
              },
              child: [
                {
                  type: "text",
                  property: {
                    text: " pratik",
                    color: "#CCCCCC",
                    fontSize: "18px"
                  }
                },
                {
                  type: "image",
                  property: {
                    src:
                      "/wireframe/image.png"
                  }
                }
              ]
            }
          ]
        }
      ]
    },
    {
      type: "view",
      property: {},
      child: [
        {
          type: "column",
          property: {
            mobile: 16,
            computer: 2
          },
          child: [
            {
              type: "text",
              property: {
                text: "hello pratik",
                color: "#CCCCCC",
                fontSize: "18px"
              }
            },
            {
              type: "text",
              property: {
                text: "sagar",
                color: "#CCCCCC",
                fontSize: "18px"
              }
            },
            {
              type: "text",
              property: {
                text: "jay",
                color: "#CCCCCC",
                fontSize: "18px"
              }
            },
            {
              type: "image",
              property: {
                src: "wireframe/image.png"
              }
            }
          ]
        },
        {
          type: "column",
          property: {},
          child: [
            {
              type: "image",
              property: {
                src: "wireframe/image.png"
              }
            }
          ]
        }
      ]
    }
  ]
};

我习惯使用像activeComponentIndex = [0,0,0,0]这样的一维数组来记住当前选择的视图，这意味着当前选择的视图是文本。喜欢

我尝试获取当前选定的视图，例如

activeComponentIndex = [0,0,0,0]

selectComponent(activeComponentIndex) {
    console.log("activeComponetIndex", activeComponentIndex);
    let view = this.state.pageData.view;
    console.log("fullView", view);
    activeComponentIndex.map(id => {
      if (view[id].child) view = view[id].child;
      else view = view[id];
      console.log("map", id, view);
    });
    console.log("selectedView", view);
    this.setState({
      activeComponent: { view: view, activeComponentIndex }
    });
  }

我需要添加一个选定视图的属性'selected：true'，

 property: {
                selected: true,
                text: "jay",
                color: "#CCCCCC",
                fontSize: "18px"
            }