كيف أقوم باستيراد وحدة بنفس الاسم من مكتبتين مختلفتين في نفس الملف في مشروع React

بتاريخ 33 دقائق مضت قال Abdelrahman Mostafa10:

حاليًا أواجه مشكلة محيرة قليلاً، استخدم مكتبة react-datepicker وreact-tailwindcss-datepicker لكن عند الاستيراد كالتالي:

import DatePicker from "react-datepicker";
import Datepicker from "react-tailwindcss-datepicker";

يحدث مشكلة حيث أن الاستيراد الثاني يلغي الاستيراد الأول بطبيعة الحال، فكيف أقوم بحل تلك المشكلة؟ قمت بالاستيراد كما هو مشروح في المستند الرسمي لكل مكتبة.

قم بتجربة الحل التالي لكن لم يجدي نفعًا:

import Datepicker as TDatepicker from "react-tailwindcss-datepicker";

في حال توفير حال أرجو شرح الحل لكي أتمكن من فهمه.

المشكلة هنا تظهر عند استخدام استيرادين يحتويان على نفس اسم المكتبة (`DatePicker`)، مما يؤدي إلى تداخل في أسماء المكونات عند الاستخدام.

لحل هذه المشكلة يمكنك استخدام الاستيراد بطريقة التسمية المختلفة لكل مكتبة يمكنك تجربه الحل التالي:

import DatePicker from "react-datepicker";
import { Datepicker } from "react-tailwindcss-datepicker";

بهذه الطريقة ستقوم باستيراد كل مكتبة تحت اسم مختلف، حيث:

- DatePicker سيكون اسم المكون من مكتبة react-datepicker
- {Datepicker} سيكون اسم المكون من مكتبة react-tailwindcss-datepicker

هذا سيمنع حدوث أي تداخل بين الاسمين داخل المشروع.

يمكنك بعدها استخدام كل مكون باسمه الجديد دون مشاكل. 

بتاريخ 4 دقائق مضت قال Khaled Osama3:

المشكلة هنا تظهر عند استخدام استيرادين يحتويان على نفس اسم المكتبة (`DatePicker`)، مما يؤدي إلى تداخل في أسماء المكونات عند الاستخدام.

لحل هذه المشكلة يمكنك استخدام الاستيراد بطريقة التسمية المختلفة لكل مكتبة يمكنك تجربه الحل التالي:

import DatePicker from "react-datepicker";
import { Datepicker } from "react-tailwindcss-datepicker";

بهذه الطريقة ستقوم باستيراد كل مكتبة تحت اسم مختلف، حيث:

- DatePicker سيكون اسم المكون من مكتبة react-datepicker
- {Datepicker} سيكون اسم المكون من مكتبة react-tailwindcss-datepicker

هذا سيمنع حدوث أي تداخل بين الاسمين داخل المشروع.

يمكنك بعدها استخدام كل مكون باسمه الجديد دون مشاكل. 

ولكن ما زلت لم أفهم ما سبب المشكلة لماذا نستطيع كتابة اسمين مختلفين بينما يوجد في المستند الرسمي اسم واحد للمكتبتين

بتاريخ 6 دقائق مضت قال Abdelrahman Mostafa10:

ولكن ما زلت لم أفهم ما سبب المشكلة لماذا نستطيع كتابة اسمين مختلفين بينما يوجد في المستند الرسمي اسم واحد للمكتبتين

سبب المشكلة هو أنه عند استيراد مكتبتين أو أكثر يحتويان على مكون (Component) بنفس الاسم، فإن ذلك يؤدي إلى تضارب (Conflict) بين المكونات.

والسبب في ذلك هو:

- في كل مكتبة يتم تصدير/تعريف المكونات تحت أسمائها الأصلية في المستند الرسمي.

- لكن عند استيراد المكتبتين مع بعض فإنه يحدث تداخل بين الأسماء.

- فالمترجم (Compiler) لن يستطيع التمييز بين المكون الأول والثاني لأنهما يحملان نفس الاسم.

- لذلك يحدث خطأ أثناء التجميع.

أما عند استخدام أسماء مختلفة عند الاستيراد فإن ذلك يجعل المترجم قادراً على التمييز بين كل مكون على حدة، فلا يحدث تداخل.

وبالتالي فإن تغيير الأسماء عند الاستيراد هو الحل لتفادي المشكلة، على الرغم من أن الأسماء الأصلية في المستندات ستظل كما هي.

بتاريخ 34 دقائق مضت قال Khaled Osama3:

سبب المشكلة هو أنه عند استيراد مكتبتين أو أكثر يحتويان على مكون (Component) بنفس الاسم، فإن ذلك يؤدي إلى تضارب (Conflict) بين المكونات.

والسبب في ذلك هو:

- في كل مكتبة يتم تصدير/تعريف المكونات تحت أسمائها الأصلية في المستند الرسمي.

- لكن عند استيراد المكتبتين مع بعض فإنه يحدث تداخل بين الأسماء.

- فالمترجم (Compiler) لن يستطيع التمييز بين المكون الأول والثاني لأنهما يحملان نفس الاسم.

- لذلك يحدث خطأ أثناء التجميع.

أما عند استخدام أسماء مختلفة عند الاستيراد فإن ذلك يجعل المترجم قادراً على التمييز بين كل مكون على حدة، فلا يحدث تداخل.

وبالتالي فإن تغيير الأسماء عند الاستيراد هو الحل لتفادي المشكلة، على الرغم من أن الأسماء الأصلية في المستندات ستظل كما هي.

جميل شكرًا جزيلاً، ولكن أليس يجب استيراد الوحدات كما هي بنفس الاسم لماذا نستطيع تغييرها؟ 

ويظهر خطأ عند استخدام تلك الطريقة:

import { Datepicker } from "react-tailwindcss-datepicker";

بتاريخ 10 ساعة قال Abdelrahman Mostafa10:

جميل شكرًا جزيلاً، ولكن أليس يجب استيراد الوحدات كما هي بنفس الاسم لماذا نستطيع تغييرها؟ 

ويظهر خطأ عند استخدام تلك الطريقة:

import { Datepicker } from "react-tailwindcss-datepicker";

حسنا يمكنك تجربه الحل التالي:

import DatePicker from "react-datepicker";
import TailwindDatePicker from "react-tailwindcss-datepicker";

عادة ليس مطلوبا تغيير أسماء المتغيرات عند استيراد مكونات من مكتبات مختلفة. 

لكن في حالة التعارض، يجوز تغيير الاسم دون مشكلة لأن الاسم المستخدم مجرد متغير محلي للإشارة إلى المكون المستوردو المكتبة نفسها لا تعتمد على هذا الاسم، بل على طريقة استدعاء المكون, فمثلا لو استدعينا DatePicker باسم آخر مثل MyDatePicker لن يحدث أي تأثير على المكتبة.