B
B
bdFregat2017-03-21 09:51:05
React
bdFregat, 2017-03-21 09:51:05

How to customize a third party React component?

Good afternoon.
What do you usually do when you need to extend the capabilities of a third party component in React? For example, you need to bind it to the Redux store in order to receive and write data.
The practice of working with OOP suggests that there must be some kind of inheritance mechanism, the ability to override or extend any methods and properties.
The second option that came to mind is to do some kind of wrapper over a third-party component in order to pass properties to it, but then how to get them from it?
How is it usually done?

Answer the question

In order to leave comments, you need to log in

2 answer(s)
M
Maxim, 2017-03-21
@bdFregat

A third party component, it's usually just a "view". Good components are what they are ( example ) (react virtualized)
To pass properties to it, we simply pass properties. Again, as an example (react select 2). We pass to it, for example, options.
Also, this "good" component has onChange conceived to change by the author..

<Select
  name="form-field-name"
  value="one"
  options={options}
  onChange={this.setUser} // тот самый onChange
/>

Already in it, you can safely "pull" the action-creator of the parent, trite:
// текущий компонент
setUser(e) { this.props.setUser(e.target.value) }
// родитель
setUser(id) { this.props.actions.setUser(id) } // вызов redux action-creator

In any case, there are only two options for turning from a child to a parent. Moreover, the first one is used in 90% of cases - this is to pass a handler function to props.
The second option, the creation of wrapper components, is used less frequently and usually already in some confusing situations.

P
Puma Thailand, 2018-01-19
@opium

Use rewritecond and full url match

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question