React - 父布局取决于子内容

Question

我有一种情况，父母的班级取决于孩子是否有内容。

 <div className="parent">
    <div className="child1"></div>
    <div className="child2"></div>
    <div className="child3"></div>
 </div>

例如，如果 child1 是唯一有内容的孩子，则父类应该是“a”，如果 child1 和 child2 有内容，那么父类应该是“ab”，等等。每个孩子都保持自己的状态，这意味着一个孩子可以从内容开始，通过状态更改，最后没有。我正在考虑使用高阶组件和参考来解决这个问题，但还没有找到一个很好的解决方案。想知道是否有构建模式可以帮助解决这个问题。

Answer 1

我对传统 React 的理解表明，如果父组件依赖于子组件的状态，那么该状态变量应该由共享的祖父母真正维护，如下所示：

<Grandparent> //Maintains State
    <Parent> // receives Grandparent state and state manipulation functions as props
        <Child 1> // receives Grandparent state and state manipulation functions as props (via Parent)
        <Child ...n> // same as child one.

您最终会一直传递定义为方法的函数，因此触发的更改可能会影响状态变量 on，并且 props 会向下传递新的。

在树中向下和向上传递函数和状态可能会变得混乱，因此根据您的树有多少级别以及传递多少状态，您可以查看redux 以简化流程. Redux 充当 React 层次结构外部的状态容器，使通用状态变量在树的任何级别都易于访问。