Как кастомизировать сторонний компонент React?

Question

[bdFregat]

День добрый.
Как вы обычно поступаете, когда нужно расширить возможности стороннего компонента на Реакт? К примеру, нужно привязать его к стору Редукса, чтобы получать и записывать данные.
Практика работы с ООП подсказывает, что должен быть какой-то механизм наследования, возможность переопределить или расширить какие-либо методы и свойства.
Второй вариант, который пришел в голову - делать какую-то обертку над сторонним компонентом, чтобы передавать в него свойства, но тогда как их получать из него?
Как это обычно делается?

Answer 1

[Максим]

Сторонний компонент, это обычно всего лишь "вьюха". Хорошие компоненты, таковыми и являются (пример) (react virtualized)

Чтобы передать в него свойства - мы просто передаем свойства. Опять же, в качестве примера (react select 2). Передаем в него, например, options.
Так же, у этого "хорошего" компонента, на изменение автором задуман onChange..

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

Уже в нем можно смело "дергать" экшен-крейтор родителя, банально:

// текущий компонент
setUser(e) { this.props.setUser(e.target.value) }
// родитель
setUser(id) { this.props.actions.setUser(id) } // вызов redux action-creator

В любом случае, вариантов обратится из потомка к родителю всего два. Причем первый используется в 90% случаев - это передать в props функцию-обработчик.
Второй вариант, созданием компонентов-оберток используется реже и обычно уже на каких-то замороченных ситуациях.

Answer 2

[Islam Ibakaev]

React has a powerful composition model, and we recommend using composition instead of inheritance to reuse code between components.

react.js docs

At Facebook, we use React in thousands of components, and we haven't found any use cases where we would recommend creating component inheritance hierarchies.

react.js docs again

https://facebook.github.io/react/docs/composition-...

p.s. секция Specialization отвечает на твой вопрос