كيفية الحصول على قيمة دالة في مكون كلاسيكي بـ React

في عالم تطوير واجهات المستخدم، تعتبر مكتبة React واحدة من أشهر الأدوات المستخدمة لتسهيل عملية بناء التطبيقات. تأتي React بفلسفة مميزة تعتمد على تدفق البيانات من الأعلى إلى الأسفل، مما يُسهل إدارة الحالة والتفاعل بين المكونات. واحدة من التحديات التي قد تواجه مطوري React هي كيفية الحصول على قيمة من مكون دالة في مكون رئيسي قائم على الفئة، وهنا وُجدت بعض الحلول الفعالة.

فهم تدفق البيانات في React

يعتبر تدفق البيانات الأحادي الاتجاه من المبادئ الرئيسية في React. يتحكم المكون الأعلى في الحالة ويقوم بتمريرها إلى المكونات الفرعية كدعائم. هذا النظام يجعل من السهل تتبع التغييرات ويضمن أن تكون جميع المكونات متزامنة مع الحالة الحالية.

إدارة الحالة في مكون قائم على الفئة

لنفترض أنك تريد الحصول على قيمة معينة مثل راتب موظف من مكون دالة إلى مكون رئيسي قائم على الفئة. بدايةً، تحتاج إلى وضع حالة محلية في مكونك الرئيسي باستخدام this.state. على سبيل المثال، يمكننا إنشاء مكون رئيسي كما يلي:

class Main extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            empSalary: "20k",
        };
    }
    handleSalaryChange = (newSalary) => {
        this.setState({ empSalary: newSalary });
    };
    render() {
        return (
            <div>
                <SalaryInfo empSalary={this.state.empSalary} onSalaryChange={this.handleSalaryChange} />
            </div>
        );
    }
}

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

إنشاء مكون دالة مع دعائم

المكون الفرعي يعمل كوسيط يتلقى القيمة من المكون الرئيسي. على سبيل المثال، يمكن أن يبدو مكون SalaryInfo كالتالي:

const SalaryInfo = ({ empSalary, onSalaryChange }) => {
    const handleChange = (e) => {
        onSalaryChange(e.target.value); // استدعاء وظيفة التحديث
    };
    return (
        <div>
            <input type="text" value={empSalary} onChange={handleChange} />
        </div>
    );
};

معلومات الراتب تُعرض في إدخال نصي، حيث تُسهم وظيفة handleChange في استدعاء دالة التحديث المارة من المكون الرئيسي. وبالتالي، كلما تم تغيير قيمة الإدخال، سيتم تحديث الحالة في المكون الرئيسي تلقائيًا.

التحويل إلى مكون دالة باستخدام useState

إذا كنت ترغب في استخدام مكونات دالة بدلاً من المكونات القائمة على الفئة، فيمكنك استخدام Hook useState. يمكنك كتابة نفس المنطق بأقل عناء كما يلي:

const Main = () => {
    const [empSalary, setEmpSalary] = useState("20k");
    const handleSalaryChange = (newSalary) => {
        setEmpSalary(newSalary);
    };
    return (
        <div>
            <SalaryInfo empSalary={empSalary} onSalaryChange={handleSalaryChange} />
        </div>
    );
};

هذا يوضح كيف يمكن التعامل مع الحالة بكفاءة في المكونات الدالة.

النتيجة النهائية

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

باختصار، من خلال فهم كيفية تمرير الدعائم والتعامل مع الحالات بشكل صحيح، يمكنك بناء تطبيقات فعالة وقابلة للصيانة بإستخدام مكتبة React. عندما تتعلم كيفية إدارة القيم بين المكونات، ستكتسب قاعدة قوية للتوسع في تطوير واجهات المستخدم.

الهذان الحلان يوفران أساليب ناجحة لتطبيق مفهوم "javascript – React How to Get Value of Function Component in Class based Main Component?" بشكل فعال بين المكونات. تذكر دائمًا أنه عبر إدارة الحالة بشكل صحيح وتدفق البيانات، يمكنك إنشاء تطبيقات سلسة وعالية الجودة.

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