Question

我正在React中制作一个工具，该工具可以用作我创建的基于属性的访问控制实现的可视化策略编辑器（也在Javascript中）。简化-策略由其他策略，规则和可评估对象组成，例如：

class Policy {
    constructor() {
        this.id = ...
        this.description = ...
        this.target = /* a class that can be evaluated to return a boolean */
        this.children = /* Array of child policies and rules */
    }

    evaluate() {
        if(this.target.evaluate() == true) {
            /* Evaluate all children */
        }
    }
}

class Rule {
    constructor() {
        this.id = ...
        this.description = ...
        this.target = /* a class that can be evaluated to return a boolean */
        this.condition = /* a class that can be evaluated to return a boolean */
        this.decision = /* 'Permit' or 'Deny' */
    }

    evaluate() {
        if(this.target.evaluate() == true && this.condition.evaluate() == true) {
            return this.decision
        }
    }
}

如果达到了“政策”目标，则将评估其子级。如果符合“规则”的目标和条件，则将返回其决定。

从视觉上看，示例策略可能如下所示：

{
    Policy: (Target: Is the user over 18?),
    Children: [
        {
            Policy: (Target: Is it a weekday?),
            Children: [{Rule: Target: (..), Condition: (..), Decision: Permit}]
        },
        {
            Rule: (Target: Is the weather nice outside?),
            Condition: (..),
            Decision: Deny
    ]
}

现在该问题的反应部分；我具有与构成访问控制策略的系统的所有组件（类）相对应的功能性React组件（使用挂钩），因此对于Policy和Rule有一个React组件。将来还将有一些组件代表可评估的目标和条件。相应的访问控制对象与useState存储在react组件中，因此例如PolicyComponent可能看起来像这样：

import Policy from './accesscontrol/Policy'

function PolicyComponent(props) {
    const [policy, setPolicy] = useState(props.policy)

    return (
        <p>{policy.description}</p>
    )
}

<PolicyComponent policy={new Policy(/* description="hello world" */)} />

这些组件使用react konva递归渲染到画布上。如您所知，react组件与访问控制系统中的类紧密耦合，并且在那里定义了很多状态逻辑和更多方法。

react组件需要能够访问和更新与它们关联的类的属性，但是我的问题是，对类实例的内部结构进行任何更改都不会更新对该类的引用-因此，没有react重新提交已触发！

我已经阅读了有关克隆对象以进行反应更新的信息，并且我已经尝试过了，但是所有的类方法都不可用，并且我认为它不能很好地与程序的递归风格一起使用。

我对React的经验不足，无法知道解决此问题的最佳方法，因此，我将不胜感激。我在这里可能有用的是：

创建我自己的状态挂钩以更新Policy / Rule对象，这也会强制更新状态（不确定是否可行）
在Policy和Rule类上指定我自己的clone（）方法（我该怎么做？）

感谢您的帮助！

如何处理与外部类实例紧密耦合的React组件的更新？

0 个答案: