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

Question

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

我尝试了 2 方法。但两者都有一些限制。

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

规则组件.js

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

2) 将 RuleComponent 设为 Main Component 的 Child 组件。现在这种方法的问题是主组件的每次更改都需要调用子组件的 checkRule 方法并期望它们发送规则最终结果，以便主组件可以使用它们来显示错误/警告。

标签： javascriptreactjsreact-nativereact-redux