在Reaction中从父组件调用子组件的方法是反模式的吗？为什么？

Is it anti-pattern to call child component#39;s method from Parent in react and why?(在Reaction中从父组件调用子组件的方法是反模式的吗？为什么？)

问题描述

我正在尝试实现一个特定的Wizard组件，用户可以使用下面的模式使用该组件。

<Wizard {...wizardProps} onFinish={this.handleFinish}>
    <WizardStep onValidate={() => this.componentARef.isValid()}>
        <ComponentA onRef = { ref => (this.componentARef = ref)}/>
    </WizardStep>

    <WizardStep onValidate={() => this.componentBRef.isValid()}>
        <ComponentB onRef = { ref => (this.componentBRef = ref)}/>
    </WizardStep>

    <WizardStep onValidate={() => this.componentCRef.isValid()}>
        <ComponentC onRef = { ref => (this.componentCRef = ref)}/>
    </WizardStep>
</Wizard>

现在考虑反应方式，我们不能/不应该从父组件调用子组件的方法。在这里，我想在每个组件中保留一个isValid方法，它将在单击Next/Finish按钮时从父Wizard组件调用。反应方式建议将状态和逻辑转移到父组件。但那样的话，我将无法在任何其他向导或任何其他位置重用相同的组件，例如ComponentA，否则我将不得不在使用ComponentA的每个父组件中复制验证逻辑。使用ref或this approach，我可以轻松访问子组件的方法(isValid)。 截至今天(Reaction版本16.6)，我没有看到在Reaction中根据需要使用此模式的任何缺陷。在Reaction中使用此模式可能会遇到什么问题？在这个特定的示例中，有没有更好的选项，可以使用它将isValid方法保留在步骤组件(例如ComponentA)中以供重用？

推荐答案

简明答案

是。

详细回答

发件人React's doc on refs：

在典型的Reaction数据流中，道具是父组件与其子组件交互的唯一方式。若要修改子对象，请使用新道具重新渲染它。

您的第一个倾向可能是在您的应用程序中使用Ref来"使事情发生"。如果是这样的话，花点时间仔细考虑一下状态应该在组件层次结构中的什么位置拥有。

创建引用是为了在特定用例(焦点、文本选择、媒体播放、第三方库等)中访问DOM，但在尝试使其他组件执行操作时应避免使用这些引用。

所以你当然可以有一个在使用ref调用子组件方法的同时工作的Reaction应用程序，但它是非常反模式的。

这篇关于在Reaction中从父组件调用子组件的方法是反模式的吗？为什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！