Question

对于应用程序的设置页面，我已经实现了一个启用（绿色）或禁用（红色）状态的滑块。并根据其子代的值来计算父代的设置。

//Getting the switches configuration inside componnetDidMount something like this

var obj = [
  {
    parent_header_name: "parent1",
    children_info: [
      {
        child_switch_name: "child1",
        isEnabled: true
      },
      {
        child_switch_name: "child2",
        isEnabled: false
      }
    ]
  },
  {
    parent_header_name: "parent2",
    children_info: [
      {
        child_switch_name: "child3",
        isEnabled: true
      }
    ]
  },
  {
    parent_header_name: "parent3",
    children_info: [
      {
        child_switch_name: "child4",
        isEnabled: false
      }
    ]
  }
];

现在，基于此值，我需要将父母和孩子组成这样的分组：

Label(the value should be parent_header_name) : Parent Switch Component
Label for children(children_switch_name) : Child Switch Component

在更改单个子开关时，我还需要获取该开关的信息，如下所示：

例如，将parent1的child1更改为Disabled

[
  {
    parent_header_name: "parent1",
    children_info: [
      {
        child_switch_name: "child1",
        isEnabled: false
      }
    ]
  }
];

如果将parent1启用，我需要获取其所有儿童值

[
  {
    parent_header_name: "parent1",
    children_info: [
      {
        child_switch_name: "child1",
        isEnabled: true
      },
      {
        child_switch_name: "child2",
        isEnabled: true
      }
    ]
  }
]

当切换父母开关时（当启用父母时，将启用子项，而当禁用儿童时将被禁用；），我需要获取该父项的全部信息

此外，我需要避免切换到“部分”状态，仅应启用或禁用父级。 “部分”仅供参考

为此，我在此切换开关上使用了react-multi-toggle。

我已经尝试过类似的操作：https://codesandbox.io/s/parent-child-switches-gxfx6

Answer 1

我会这样做：

您有一个顶级Settings类，该类获取settings对象，将其保存为状态并映射该数组，创建ParentSwitch实例，并传递完整的父级设置（包括其子级和作为Settings

ParentSwitch

然后ParentSwitch根据其道具创建ChildSwitch，并将通过道具获得的updateSettings函数传递给ChildSwitch
< / li>
切换ChildSwitch时，它将调用Settings中的函数，切换Settings的状态，该状态将传递给ParentSwitch和{{ 1}}的显示位置

这可以理解吗？随意询问任何可能不清楚的地方

编辑： 这是工作码本。您必须自己进行布局，我已经花了很多时间。 https://codesandbox.io/s/parent-child-switches-jq0bp?fontsize=14 我所有的代码都在ChildSwitch

中

Answer 2

您可以重构Intel x86 Emulator Accelerator (HAXM)，以使其将您的开关Setting component呈现为从API接收的数据。我建议您为每个name and value according添加一个ID，以简化您的工作。 Emulator: ERROR: x86 emulation currently requires hardware acceleration。可以优化代码以适合您的用例。关键更改在switches group中完成。

设置组件完整代码

Setting Component

根据对象数组形成组件

2 个答案: