Javascript 如何从react.js中的主组件调用实用程序组件

我有一个名为RuleComponent.js的实用程序组件。其中，所有逻辑都定义为流程规则。它连接到Redux store以获取UI元素的数据并处理该元素上的规则。 现在我有了不同的组件Main.js。这里我有一个render方法，其中定义了所有UI元素。现在，对于每个onchange事件，我想调用RuleComponent checkRule函数来对特定元素应用规则，并根据结果处理主组件中的错误/警告

我尝试了两种方法。但两者都有一定的局限性

1） 将RuleComponet作为父组件，将Main.js作为子组件。 但这种方法的问题是我希望规则组件作为实用组件。不希望主组件完全依赖于RuleComponent

RuleComponent.js

render(){
        return(
            <div>
                Rule Component
                <Main checkRules={this.checkRules} setRuleDefination={this.setRuleDefination}/>
            </div>
        );
    }

render（）{
返回(
规则组件
);
}

2） 将RuleComponent作为主组件的子组件。

---

现在这种方法的问题是，主组件中的每个更改都需要调用子组件checkRule方法，并期望它们发送规则最终结果，以便主组件可以使用它们显示错误/警告。

您是否尝试过将“实用组件”改为实用函数的集合？导入正在检查/设置规则的函数，并将结果传递给主组件。但我需要实用程序组件具有Redux访问权限。主组件是否可以直接为实用程序计算分派操作？他们可能会设置一些应用程序状态值，这些值会读回主组件。不清楚为什么您需要一个完全独立的组件来运行一些实用程序计算。如果您需要两个组件，那么您需要将某些组件状态放样到一个共同的祖先，而不是试图使其中一个组件成为另一个组件的父组件。