O'zgaruvchan reaksiya asosida komponentni ishlab chiqaradi

Agar o'zgaruvchiga asoslangan holda komponentni qaytarib berishni iloji bo'lsa, bu haqda iltimos qilmoqchiman:

var location = this.props.location//Eg. Asia,Australia

Buning bilan bog'liq muammo mening komponentlarimni alohida-alohida qo'lda import qilish kerak.

Bu menda mavjud bo'lgan boshqa yozuv:

import AsiaHeaderComponent from "components/AsiaHeaderComponent.jsx";
import AustraliaHeaderComponent from "components/AustraliaHeaderComponent.jsx";

class Home extends React.Component {
    renderHeader(){
        if(this.props.location == "Asia"){
            return (
                
            );
        }
        else if(this.props.location == "Australia"){
            return (
                
            );
        }
    }
    render(){
        return (
            { this.renderHeader() }
        )
    }
}

Yuqorida aytib o'tilganidek, agar qo'lda boshqa shartlar mavjud bo'lsa, ichki qismga joylashtirilgan barcha nomlarni import qilish kerak.

Buni samarali qilishning bir yo'li bormi?

3

7 javoblar

Ikki narsa. avval siz faqat bitta sarlavhaga ega bo'lishingiz va kerakli ma'lumotlarni ko'rsatish uchun zarur bo'lgan ma'lumotlarni uzatishingiz kerak. Men, ehtimol, bu nomni bitta qit'adan boshqasiga farq qilmasligi ehtimoldan yiroq emas. Ikkinchidan, bu dinamik ravishda tarkibiy qismlarga ega bo'lishning usullaridan biri bu kabi xash jadvali ishlatishdir

const headerLookup = {
    asia: AsiaHeaderComponent,
    australia: AustraliaHeaderComponent
    .... more here
}

keyin sizning kodingiz

render() {
    const Header = headerLookup[this.props.location.toLowerCase()]

    return (
        
    );
}

Nazariyada siz komponentlaringizni/elementlaringizning barchasini o'zingiz olishingiz va ularni turga qarab o'chirib qo'yishingiz mumkin. Ushbu turdagi qit'aning nomi. Agar sizga yaxshi yoki to'liqroq misol berishni istasangiz, hozirda sizda "header" tarkibiy qismida nima borligini ko'rish uchun ko'p narsa yordam beradi, shuning uchun ularning orasidagi umumiyliklarni ko'rishim mumkin :)

2
qo'shib qo'ydi
Ha, rahmatli odam! Sizning taklifingizga amal qilaman va bu hozir men uchun ishlaydigan ko'rinadi.
qo'shib qo'ydi muallif Sydney Loteria, manba

Ikki narsa. avval siz faqat bitta sarlavhaga ega bo'lishingiz va kerakli ma'lumotlarni ko'rsatish uchun zarur bo'lgan ma'lumotlarni uzatishingiz kerak. Men, ehtimol, bu nomni bitta qit'adan boshqasiga farq qilmasligi ehtimoldan yiroq emas. Ikkinchidan, bu dinamik ravishda tarkibiy qismlarga ega bo'lishning usullaridan biri bu kabi xash jadvali ishlatishdir

const headerLookup = {
    asia: AsiaHeaderComponent,
    australia: AustraliaHeaderComponent
    .... more here
}

keyin sizning kodingiz

render() {
    const Header = headerLookup[this.props.location.toLowerCase()]

    return (
        
    );
}

Nazariyada siz komponentlaringizni/elementlaringizning barchasini o'zingiz olishingiz va ularni turga qarab o'chirib qo'yishingiz mumkin. Ushbu turdagi qit'aning nomi. Agar sizga yaxshi yoki to'liqroq misol berishni istasangiz, hozirda sizda "header" tarkibiy qismida nima borligini ko'rish uchun ko'p narsa yordam beradi, shuning uchun ularning orasidagi umumiyliklarni ko'rishim mumkin :)

2
qo'shib qo'ydi
Ha, rahmatli odam! Sizning taklifingizga amal qilaman va bu hozir men uchun ishlaydigan ko'rinadi.
qo'shib qo'ydi muallif Sydney Loteria, manba

Ehtimol, men bu yerga borishim mumkin, barcha joylarni bitta komponentga import qilaman, u erda sizning fikringizni qilaman

import AsiaHeaderComponent from "components/AsiaHeaderComponent.jsx";
import AustraliaHeaderComponent from "components/AustraliaHeaderComponent.jsx";

class Home extends React.Component {

    render() {
        const {continent} = this.props;


        return (
            <div>
                {continent == 'Asia' ?
                     :null
                }
                {location == 'Australia' ?
                     :null
                }

            </div>
        );
    }
}

export default Home

keyin siz manzilni import qilishingiz va uni ishlatishingiz mumkin

import Home from "components/Home.jsx";

class SomeComponent extends React.Component {

    render(){
        return (
            
        )
    }
}
1
qo'shib qo'ydi

ECMAScript 6 module loader API :

Moduli bilan ishlash uchun deklarativ sintaksisdan tashqari siz ularni dasturiy ravishda yuklashingiz mumkin, lekin ECMAScript 6 modul o'rnatish API'si ishlayapti.

Eslatma:

     
      
  1. Modulni o'rnatish APIsi ES6 standartining bir qismi emas.
  2.   
  3. Modulni o'rnatish APIsi ishlamoqda
  4.   

Bunga qanday erishish mumkin?

  • Dasturiy jihatdan modullar bilan ishlash
  • Modulni o'rnatishni sozlash.

Siz dasturiy ta'minotdan, Promises-ga asoslangan API orqali modulni import qilishingiz mumkin:

  System.import('some_module')
    .then(some_module => {
       //Use some_module
    })
    .catch(error => {
        ···
    });

System.import() quyidagilarni amalga oshirishga imkon beradi:

  • Elementlar ichidagi modullardan foydalaning (modul sintaksisi bu erda emas qo'llab-quvvatlanadigan, modullarni va skriptlar bo'limiga qarang tafsilotlar).
  • Moduli shartli ravishda yuklab oling.

System.import() bitta modulni oladi, bir necha modulni import qilish uchun Promise.all() dan foydalanishingiz mumkin:

Promise.all(
    ['module1', 'module2', 'module3']
    .map(x => System.import(x)))
.then(([module1, module2, module3]) => {
   //Use module1, module2, module3
});

Bunga erishishning yana bir necha yo'li bor, iltimos, ushbu havolaga murojaat qiling    ECMAScript 6 moduli o'rnatish API'si mavzuni 16.5 da qidirish

1
qo'shib qo'ydi
Iltimos, pastga tushishni tushuntiring. Ba'zi fikrlarni qo'shing.
qo'shib qo'ydi muallif Sagar Shetty, manba

ECMAScript 6 module loader API :

Moduli bilan ishlash uchun deklarativ sintaksisdan tashqari siz ularni dasturiy ravishda yuklashingiz mumkin, lekin ECMAScript 6 modul o'rnatish API'si ishlayapti.

Eslatma:

     
      
  1. Modulni o'rnatish APIsi ES6 standartining bir qismi emas.
  2.   
  3. Modulni o'rnatish APIsi ishlamoqda
  4.   

Bunga qanday erishish mumkin?

  • Dasturiy jihatdan modullar bilan ishlash
  • Modulni o'rnatishni sozlash.

Siz dasturiy ta'minotdan, Promises-ga asoslangan API orqali modulni import qilishingiz mumkin:

  System.import('some_module')
    .then(some_module => {
       //Use some_module
    })
    .catch(error => {
        ···
    });

System.import() quyidagilarni amalga oshirishga imkon beradi:

  • Elementlar ichidagi modullardan foydalaning (modul sintaksisi bu erda emas qo'llab-quvvatlanadigan, modullarni va skriptlar bo'limiga qarang tafsilotlar).
  • Moduli shartli ravishda yuklab oling.

System.import() bitta modulni oladi, bir necha modulni import qilish uchun Promise.all() dan foydalanishingiz mumkin:

Promise.all(
    ['module1', 'module2', 'module3']
    .map(x => System.import(x)))
.then(([module1, module2, module3]) => {
   //Use module1, module2, module3
});

Bunga erishishning yana bir necha yo'li bor, iltimos, ushbu havolaga murojaat qiling    ECMAScript 6 moduli o'rnatish API'si mavzuni 16.5 da qidirish

1
qo'shib qo'ydi
Iltimos, pastga tushishni tushuntiring. Ba'zi fikrlarni qo'shing.
qo'shib qo'ydi muallif Sagar Shetty, manba

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

import AsiaHeaderComponent from "components/AsiaHeaderComponent.jsx";
import AustraliaHeaderComponent from "components/AustraliaHeaderComponent.jsx";

const componentOf = {
        aisa: AsiaHeaderComponent,
        australia: AustraliaHeaderComponent
};

class Home extends React.Component {
    renderHeader(){
        return componentOf[this.props.location]
    }
    render(){
        return (
            { this.renderHeader() }
        )
    }
}
</div> </div>

Ehtimol, bu bir oz yaxshiroqmi?

0
qo'shib qo'ydi
Bu javob qanday qabul qilinmoqda, bu men uchun ishlamaydi, ammo Yuhannoning javobidan
qo'shib qo'ydi muallif Eduard, manba

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

import AsiaHeaderComponent from "components/AsiaHeaderComponent.jsx";
import AustraliaHeaderComponent from "components/AustraliaHeaderComponent.jsx";

const componentOf = {
        aisa: AsiaHeaderComponent,
        australia: AustraliaHeaderComponent
};

class Home extends React.Component {
    renderHeader(){
        return componentOf[this.props.location]
    }
    render(){
        return (
            { this.renderHeader() }
        )
    }
}
</div> </div>

Ehtimol, bu bir oz yaxshiroqmi?

0
qo'shib qo'ydi
Bu javob qanday qabul qilinmoqda, bu men uchun ishlamaydi, ammo Yuhannoning javobidan
qo'shib qo'ydi muallif Eduard, manba
ReactJS & ReactNative Uzbekistan
ReactJS & ReactNative Uzbekistan
81 ishtirokchilar

Guruh ReactJS va ReactNative bo'yicha muloqot qilish uchun ochilgan. Sizni qiziqtirsa: @nodejs_uz @react_uz @angular_uz @ngTashkent @yiiframework_uz @js_uzb @typescript_uzb @vuejs_uz @ngTashkent @laravel_uz @uzdevgroup Ish o'rinlari @UzDev_jobs