javascript - Is it anti-pattern to call child component's method from Parent in react and why? - Stack Overflow

admin管理员组

文章数量:1434949

I am trying to implement a specific Wizard ponent which user can consume using the pattern below.

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

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

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

Now considering the react way we can't/shouldn't call child ponent's method from parent ponent. Here I want to keep a isValid method in each ponent which will be called from Parent Wizard ponent on click of Next/Finish button. React way suggest to move the state and logic to parent ponent. But that way I won't be able to reuse the same ponent e.g. ComponentA in any other wizard or any other place or I will have to duplicate the validation logic in every parent ponent who is using ComponentA. Using ref or this approach I can easily access the child ponent's method(isValid).

As of today(React version 16.6) I don't see any pitfalls using this pattern on need basis in react. What are the possible problem I may face using this pattern in react? And is there any better option in this particular example using which I can keep isValid method in step ponent(e.g. ComponentA) for reuse?

I am trying to implement a specific Wizard ponent which user can consume using the pattern below.

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

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

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

Now considering the react way we can't/shouldn't call child ponent's method from parent ponent. Here I want to keep a isValid method in each ponent which will be called from Parent Wizard ponent on click of Next/Finish button. React way suggest to move the state and logic to parent ponent. But that way I won't be able to reuse the same ponent e.g. ComponentA in any other wizard or any other place or I will have to duplicate the validation logic in every parent ponent who is using ComponentA. Using ref or this approach I can easily access the child ponent's method(isValid).

As of today(React version 16.6) I don't see any pitfalls using this pattern on need basis in react. What are the possible problem I may face using this pattern in react? And is there any better option in this particular example using which I can keep isValid method in step ponent(e.g. ComponentA) for reuse?

• javascript
• reactjs
• reactive-programming

Share Improve this question Follow asked Jan 12, 2019 at 12:07 Debajit MajumderDebajit Majumder 93422 gold badges1212 silver badges2323 bronze badges 4

• 1 it is technically accepted that you should use a top-down, decoupled approach to ponent design and data flow within React, so yes, with that in mind, it is an anti-pattern to call child methods in the parent. – Zerium Commented Jan 12, 2019 at 12:10
• why can't you turn the Next/Finish button into a reusable ponent that each of your ponents then consumes? that way, each ponent has control over that button (i.e. disabling it as necessary), and you can still have your whole wizard form flow intact. – Zerium Commented Jan 12, 2019 at 12:13
• yes, I understand that considering react paradigm it's not advisable. But like in this scenario when I'm trying to abstract out the logic of ComponentA along with it's validation it seems to be pretty obvious and straight forward. I am just trying to understand does this term AntiPattern es with any disadvantages/pitfalls which I may face later. – Debajit Majumder Commented Jan 12, 2019 at 12:24
• prev/next/finish button is already a reusable WizardFooter ponent. But I don't want to include it in my stepComponent(say ComponentA) because then I won't be able to use that form/ponent at some other place where I probably need a different action e.g. form submit button. – Debajit Majumder Commented Jan 12, 2019 at 12:24

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

Short answer

Yes.

Long answer

From React's doc on refs:

In the typical React dataflow, props are the only way that parent ponents interact with their children. To modify a child, you re-render it with new props.

Your first inclination may be to use refs to “make things happen” in your app. If this is the case, take a moment and think more critically about where state should be owned in the ponent hierarchy.

Refs were created to access the DOM in specific use cases (focus, text selection, media playback, third party libs, etc), but they shall be avoided when trying to make other ponents execute actions.

So of course you can have a React app that works while using refs to call child ponent method, but yes, it is very anti-pattern.

Short Answer: This approach in your scenario is alright. Just re-visit it when your scenario get change.

Explanation:

It's not an anti-pattern in your scenario. It will be consider an anti-pattern, if you are controlling behavior of child ponent through ref.

React suggest to avoid such anti-patterns as general advise to avoid edge cases where your ponent bee unstable as it get controlled by different source of truth. But, in the scenario like yours where you are sure about why you are using it, it's fine.

For example, React advise not to populate state from props. This is true because then you have two source of truth and you need to sync them otherwise your ponent will not behave properly. But, If you are sure that, your props (specifically data) will not be going to change, it's no longer an anti-pattern because, you are now seeding state from props but then it continue to manage at state level only.

本文标签： javascriptIs it antipattern to call child component39s method from Parent in react and whyStack Overflow