如何从库中扩展React组件

Question

I want to extend the FormControl component from react-bootstrap . Importantly though, I want my extended component to replace the react-bootstrap component, so that importing from the react-bootstrap package actually imports my extended component.

Mostly I need to change the render method to include an absolutely-positioned counter for input[type=text] and textarea nodes, by looking at their inputRef prop.

What is the best way to do this?

Answer 1

Reacts core idea is composability over inheritance . So you wrap you component around the bootstrap component and use your component everywhere .

Answer 2

For extending, this should do:

import MyComponent from 'react-bootstrap'

class NewComponent extends MyComponent {

}

Pretty sure you can't overwrite an import from a package like you want though because it makes no sense to do so. Just import from the new component instead.

Why exactly do you want to overwrite the existing instead of just providing a wrapping component that inherits it?