Les décorateurs sont un concept de programmation basé sur des annotations et des métaprogrammes. Ils sont utilisés pour modifier ou améliorer les classes et les objets au moment de la compilation. Cependant, il est important de noter que le support des décorateurs en JavaScript est toujours à l’étape expérimentale et n’est pas officiellement supporté en ReactJS.
Cela dit, il existe plusieurs bibliothèques et utilitaires qui utilisent des concepts similaires aux décorateurs, comme `react-redux` avec ses fonctions `connect()` et `@inject` dans `mobx-react`.
Voici comment on pourrait utiliser une fonction connect() de `react-redux` en tant que décorateur :
```
import React from ‘react’;
import { connect } from ‘react-redux’;
@connect((state) => {
return { color: state.color };
})
class MyComponent extends React.Component {
render() {
return
```
class MyComponent extends React.Component {
/* … */
}
const mapStateToProps = (state) => {
return { color: state.color };
};
MyComponent = connect(mapStateToProps)(MyComponent);
```
Il est à noter qu’à l’heure actuelle, l’utilisation de décorateurs en JavaScript et par extension React nécessite une configuration de Babel adéquate et leur utilisation reste controversée en raison de leur statut expérimental. Pour garantir la compatibilité et la maintenabilité de votre code, il peut être préférable d’utiliser les méthodes traditionnelles telles que les Higher Order Components (HOCs) ou les hooks.
