Question

我有A，B，C

类型组件的树结构

我希望我的 Component_Type_B 组件能够显示（在特定字段中）内部的Component_Type_C的数量 Component_Type_A 组件显示（在特定字段中） Component_Type_C 的总和。

因此A的渲染功能类似于：

render {
    return (<div>
        <span>Total of Component_Type_C inside: {...}</span>
        <div>{renderComponentsB}</div>
    </div>)
}

B的渲染功能类似于：

render {
    return (<div>
        <span>Total of Component_Type_C inside: {...}</span>
        <div>{renderComponentsC}</div>
    </div>)
}

约束是我想只计算具有两个状态属性到某个值的 Component_Type_C ：

例如：

this.state.has_propA = true
this.state.has_propB = true

这些属性可随时更改 Component_Type_C 组件被用户交互修改

<Component_Type_A>   => Should display '7'
    <Component_Type_B>    => Should display '4'
        <Component_Type_C />
        <Component_Type_C />
        <Component_Type_C />
        <Component_Type_C />
    </Component_Type_B>
    <Component_Type_B>    => Should display '2'
        <Component_Type_C />
        <Component_Type_C />
    </Component_Type_B>
    <Component_Type_B>    => Should display '1'
        <Component_Type_C />     
        <Component_Type_C />    // this.state.has_propA = true  and   this.state.has_propB = false
        <Component_Type_C />    // this.state.has_propA = true  and   this.state.has_propB = false
    </Component_Type_B>
</Component_Type_A>

那么，如何刷新 Component_Type_B 和Component_Type_C级别显示的值，根据 Component_Type_C的的状态？

我有一个巨大的 Component_Type_C 列表，它嵌套在多级Component_Type_B中，因此最小化渲染循环是一个目标。

Answer 1

它会怎么样？

老实说，最简单的解决方案是在商店中创建一个嵌套数组。

每次创建performBackgroundTask时，都会添加一个空数组。添加C时，找到正确的数组并将值推入数组。您的ComponentB将检查商店并对长度进行适当的检查;

ComponentA

您可以根据需要构建商店。我相信可能有更有效的存储方式。

根据React组件

1 个答案: