reactjs - entre - ¿Cómo extender un componente React?

render react native

Question

Digamos que hay un componente React que me gusta, pero que quiero modificar. Para este ejemplo, usaremos LinearProgress Material UI. Quiero hacer una barra de búsqueda pulsable fuera de ella.

class SeekBar extends LinearProgress {
componentDidMount() {
super.componentDidMount();
console.log(''my stuff here'');
}
}

Pero siento que puedo ser muy limitado en cuanto a lo que puedo hacer para cambiar lo render rendimientos de render . Sin embargo, tal vez estoy haciendo todo esto mal. Si me gusta un componente React en particular, como un componente Material UI, ¿cuál es una manera buena y reutilizable de personalizar su apariencia y funcionalidad y hacerla mía?

Answer 1

En el mundo ES6 / JSX / React, puede ampliar los comportamientos y valores de los componentes de muchas maneras. Yo recomendaría uno de los siguientes, considerando que usa Material UI.

Primer caso:

Tienes dos componentes que extienden el Component desde React:

class ExampleComponent extends React.Component {
render () {
return(
<div>
<button {...this.props}>
Click me!
</button>
</div>
)
}
}
class RenderComponent extends React.Component {
clickHandler () {
console.log(''Click fired!'')
}
render () {
return(
<ExampleComponent onClick={this.clickHandler.bind(this)} />
)
}
}

En ese ejemplo, onClick se pasa a través de accesorios dentro del ExampleComponent representado. Ejemplo aquí .

Segundo caso:

Esto es similar en cómo Material UI extiende sus propios componentes:

class ExampleComponent extends React.Component {
clickHandler () {
console.log(''Click fired!'')
}
}
class RenderComponent extends ExampleComponent {
render () {
return(
<div>
<button onClick={this.clickHandler.bind(this)}>
Click me!
</button>
</div>
)
}
}

En este ejemplo, tiene un componente que extiende el Component desde React pero solo tiene métodos de eventos. Luego, extiendes este componente y lo haces con el comportamiento extendido. Aquí hay un ejemplo en vivo .

¡Espero eso ayude!

Answer 2

Una forma es:

export default class Seekbar extends React.Component{
// perform any modification
render(){
return <LinearProgress ...changes/>
}
}

Otra forma es un componente de orden superior, HOC. Aquí hay un gran blog con más información: http://natpryce.com/articles/000814.html

Creo que con Material-UI tu mejor opción sería envolverlo y hacer las modificaciones que desees. Desafortunadamente, este proyecto está muy estrechamente acoplado gracias a cosas como los estilos en línea y su administrador de archivos, por lo que sacar un solo componente puede ser difícil. HOC sería mejor para cosas como compartir algunas funciones inteligentes entre los componentes, como pasar una propuesta de "tema" automáticamente a los componentes.