Librement couplé : transmettre les données à l’application React via drupalSettings

Il peut être nécessaire de transmettre une variable, des paramètres de case à cocher ou certains paramètres globaux de Drupal pour réagir. Cela peut être réalisé en transmettant des données de Drupal à une API et en utilisant la même API en réaction. Mais pourquoi appeler une API supplémentaire alors que nous pouvons y parvenir sans elle ?
Nous utiliserons #attached/drupalSettings pour y parvenir.

Étape 1 : Modifier notre définition de bibliothèque.

Ajoutez une dépendance pour drupalSettings où le fichier de bundle de réaction est inclus :

react-lib:
  version: 1.x
  js:
    js/react-app/dist/app.bundle.js: { minified: true }
  dependencies:
    - core/drupalSettings

Étape 2 : Transmettez les paramètres au navigateur à l’aide du framework #attached.

Cela peut être fait soit de la manière suivante :

i) N’importe quel hook de prétraitement :

function react_module_preprocess_node(&$variables) {
  $variables['content']['#attached']['drupalSettings']['reactApp']['setting1'] = 'value1';
  $variables['content']['#attached']['drupalSettings']['reactApp']['setting2'] = 'value2';
}

ii) Crochet d’attachement de page :

function react_module_page_attachments(array &$attachments) {
  $attachments['#attached']['library'][] = 'react_module/react-lib';
  $attachments['#attached']['drupalSettings']['reactApp']['setting1'] = 'value1';
  $attachments['#attached']['drupalSettings']['reactApp']['setting2'] = 'value2';
}

iii) tableau de rendu (formulaires, blocs, etc.).

Par exemple, si vous voulez faire des choses à partir d’un modifier la formeoù nous avons ajouté le balisage et la bibliothèque :

$form['my_react_app'] = [
  '#markup' => '<div id="react-root"></div>',
  '#attached' => [
    'library' => [
      'react_module/react-lib'
    ],
    'drupalSettings' => [
      'reactApp' => [
        'setting1' => 'value1',
        'setting2' => 'value2',
      ],
    ],
  ],
];

Étape 3 : Accéder aux paramètres dans l’application React

drupalSettings est une variable globale qui peut donc être utilisée directement dans l’application React.

import React from 'react';
import ReactDOM from 'react-dom';

const root = ReactDOM.createRoot(document.getElementById('react-root'));
root.render(
  <>{drupalSettings.reactApp.setting1} {drupalSettings.reactApp.setting2}</>
);

Note: Si l’une des modifications n’est pas répercutée lors de l’actualisation de la page, essayez vider le navigateur ou le cache Drupal. Vous pouvez aussi toujours appeler console.log (drupalSettings); dans la console du navigateur pour déboguer.

TROUVÉ CELA UTILE ? PARTAGEZ-LE