I have built my own FormBuilder
component (which is almost 5k
line now), so it can cover all my needs, one issue i'm encountering is loading a new set of FormData
any time the user needs, since my FormBuilder
can accept a set of nested components, its kinda hard comparing the changes, and handling everything in component did mount, one easy way is building a loadFormData
method inside the FormBuilder
and calling this method from outside the component
I know this can easily be accomplished using ref attribute
, but react highly suggest avoiding this and i got discouraged! and i was not sure if i should do this or not!
So i came up with a new alternative which kinda does the same thing:
class A {
onGetFormBuilderInternalFunction = (functions) => {
this.formBuilderFunctions = functions
}
onLoadButtonClick = () => {
this.formBuilderFunctions.loadFormData(someNewData)
}
render () {
<FormBuilder onGetInternalFunction={this.onGetFormBuilderInternalFunction}
}
}
class FormBuilder {
componentDidMount() {
if (this.props.onGetInternalFunction) {
this.props.onGetInternalFunction({
loadFormData: this.loadFormData,
})
}
}
}
So what do you think ?, is this a better approach ? or is this still a bad one ?, i was thinking using this method will at least only gives access to functions i need and not everything else.
I should also mention, loadFormData
is simply one example, and there are at least a couple of these special function
which i really really think is best to simply call from outside, so even if i do somehow pass the new data from props and handle it in componentDidUpdate
, for the rest of these functions, i still need to access the FormBuilder
from Should i pass functions to my component manually or using ref attribute?
No comments:
Post a Comment