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
Source link