¿Cómo usar decoradores en Reactjs?

Los decoradores no son una característica exclusiva de React.js, sino que forman parte del estándar de JavaScript desde ES7. Sin embargo, los decoradores se pueden utilizar en React.js para agregar funcionalidades adicionales a los componentes.

Los decoradores son una forma de envolver un valor de exportación con una función. La función de decorador tendrá una estructura como la siguiente:

```javascript
function myDecorator(Component) { // hacer algo con el Componente

return Component; } ```

Luego puedes usar este decorador para envolver un componente de esta manera:

```javascript
@myDecorator
class MyClass extends React.Component { // código del componente
}
```

Un uso muy común para los decoradores en React.js es en combinación con Redux. Redux tiene una función `connect` que se usa para conectar un componente React con el almacén de Redux. Esta función `connect` se puede usar como decorador.

Aquí te dejo un ejemplo de cómo se utiliza en Redux:

```javascript
import React from ‘react’;
import { connect } from ‘react-redux’;

@connect(mapStateToProps, mapDispatchToProps)
class MyComponent extends React.Component { // código del componente
}

function mapStateToProps(state) { // mapear el estado al propiedades del componente
}

function mapDispatchToProps(dispatch) { // mapear las acciones del dispatch al propiedades del componente
}
```

En este caso, el decorador `connect` toma dos funciones como parámetros y devuelve una nueva función que puede tomar un componente React como un argumento. Envuelve el componente orignal con un nuevo componente que está “conectado” al almacén de Redux.

En general, los decoradores proporcionan una manera elegante de envolver los componentes con lógica adicional, sin tener que hacer cambios significativos en la implementación del componente original.

Es importante señalar que a partir de la creación de esta guía (enero de 2022), los decoradores son aún una característica experimental en JavaScript y no están habilitados en algunos proyectos por defecto. Es posible que necesites ajustar la configuración de tu proyecto para poder utilizarlos.