تكامل React: عرض مكونات الصفحة من خلال نصوص ديناميكية

في هذا المثال البرمجي، يتم استخدام React لتحميل صفحة (Page2) وعرض محتوى مأخوذ من صفحة أخرى (Page1) باستخدام دالة loadPage. يتم تمرير نص HTML كمعامل لهذه الدالة، ويتم تخزينه في حالة المكون باسم content. الهدف هو استبدال النص بمكون React الفعلي الذي يتم الإشارة إليه في النص.

لتحقيق ذلك، يمكنك استخدام مكتبة dangerouslySetInnerHTML المتوفرة في React لتفيذ النص الذي يحتوي على تعليمات HTML. يمكنك تحويل النص إلى عنصر React باستخدام الدالة dangerouslySetInnerHTML واستخدام الإشارات (<>) لفتح وإغلاق العناصر.

في الكود أدناه، يتم تحديث الدالة render لاستخدام dangerouslySetInnerHTML لعرض النص الديناميكي كمكون React:

javascriptCopy code
var React = require('react');
var Header = require('./header');

var home = React.createClass({

  loadPage: function (str) {
    this.setState({
      content: str
    });
  },

  render: function () {
    return (
      <div dangerouslySetInnerHTML={{ __html: this.state.content }}>div>
    );
  }

});

تأكد من أن النص الذي تم تمريره إلى loadPage يحتوي على عناصر HTML صحيحة وأنه يشير إلى الأنواع الفعلية للمكونات مثل

في هذا السياق. بعد تحميل النص، ستتم عرض المكونات كأجزاء من الصفحة باستخدام dangerouslySetInnerHTML.

بالطبع، دعوني أوسع شرحي للحل البرمجي المقترح.

في هذا السياق، يتم استخدام مكتبة React لإنشاء وإدارة واجهة المستخدم. في المثال الذي قدمته، يتم استخدام React.createClass لإنشاء مكون React باسم home. يتضمن هذا المكون دالة loadPage التي تقوم بتحديث حالة المكون (content) باستخدام النص الذي يتم تمريره إليها.

عندما يتم تحميل النص باستخدام loadPage، يتم تحديث حالة المكون، وبالتالي يعيد تقديم المكون نفسه. في دالة render، يتم استخدام dangerouslySetInnerHTML لعرض النص الديناميكي كجزء من واجهة المستخدم.

تُستخدم dangerouslySetInnerHTML بحذر لتجنب هجمات Cross-Site Scripting (XSS)، ويجب تحقق من أن النص الذي يتم تمريره آمن ولا يحتوي على أي أكواد خبيثة.

يمكنك استخدام هذا النهج عندما تكون واثقًا من المصدر الذي يقدم النص وتريد عرضه كجزء من واجهة المستخدم دون تحليله ككود React مباشر.

لاحظ أنه يفضل استخدام هذا النهج بحذر، خاصةً إذا كنت تتلقى النص من مصادر خارجية، لضمان عدم تنفيذ أي أكواد خبيثة في تطبيقك.