ایجاد کامپوننت های پویا در React

ایجاد کامپوننت های پویا در React

ایجاد کامپوننت های پویا در React

React — Dynamic Component Names with JSX

توسط : admin
استفاده از کامپوننت ها درون سایر کامپوننت ها یکی از رایج ترین کارهایی است که شما با React انجام خواهید داد.اگر بخواهید نمایش این کامپوننت ها در صورت شرط خاصی باشد و از طریق props انجام شوند چطور ؟

 

دستور سوئیچ می توانند کار خود را برای یک لیست از پیش تعریف شده از کامپوننت ها انجام دهد ، اما اگر بخواهید از طریق props کامپوننتی را به کامپوننتهای فرزند منتقل کنید ، باید چکاری انجام دهید؟

 

ایده اولیه شما ممکن است انجام کاری مشابه آنچه در زیر نشان داده شده است باشد . تلاش برای تنظیم نام کامپوننت ( به صورت مستقیم) از طریق یک عبارت عمومی. این کد کار نمی کند و باعث ایجاد خطای کامپایلر می شود.

render() {
    return <[this.props.tag] />
}

 

شما نمی توانید از یک عبارت کلی برای این کار استفاده کنید ،  JSX به این صورت کار نمیکند . نام عناصر که با یک حروف کوچک شروع می شوند ، به اجزای ساخته شده (یا عناصر HTML) مانند برچسب های div و span گفته می شود.

در React ، نامهایی که با یک حرف بزرگ شروع می شوند ، به روش createComponent کامپایل می شوند. بنابراین با توجه به این نکته ، راه حل صحیح این است که مقدار نام را به متغیر capitalized که با حرف اول بزرگ شروع شده است ، اختصاص دهید (به کد زیر توجه کنید).

 

render() {
    const TagName = this.props.tag;
    return <TagName />
}

روش دیگری که من دوست دارم از آن استفاده کنم مپ کردن اجزای فرزند در یک شیء است. این امر پیکربندی (و استفاده مجدد) از مؤلفه را آسان تر می کند زیرا فقط یک کلید اختصاری به جای نام کامل کامپوننت لازم است.

import React, { Component } from 'react';
import FooComponent from './foo-component';
import BarComponent from './bar-component';
class MyComponent extends Component {
    components = {
        foo: FooComponent,
        bar: BarComponent
    };
    render() {
       const TagName = this.components[this.props.tag || 'foo'];
       return <TagName />
    }
}
export default MyComponent;

 

در صورت اضافه شدن کامپوننت های فرزند دیگر در آینده می توان آیتم دیگری را به این مپ اضافه کرد. به خاطر داشته باشید که مقدار اختصاص داده شده می تواند جزء یا مرجع کلاس باشد ، نه فقط یک رشته.

سپس این کامپوننت می تواند همانطور که در شکل زیر مشاهده می شود وارد و استفاده شود.

 

import React, { Component } from 'react';
import MyComponent from './my-component';
class App extends Component {
    render() {
        return (
            <div>
                <MyComponent tag="foo" />
                <MyComponent tag="bar" />
            </div>
         );
     }
}
export default App;

 

 

نظرات :

در عرض چند دقیقه برای ایجاد حساب

کاربری خود اقدام کنید


اکنون حساب کاربری خود را ایجاد کنید!


ایجاد حساب کاربری

با ثبت نام در نیلوتک از آخرین بروز رسانی های آموزش ها و مقالات سایت مطلع شوید