第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

如何在 React 中將一組對象映射到不同的組件 props？

如何在 React 中將一組對象映射到不同的組件 props？

ibeautiful 2022-08-04 09:45:24
我有一個對象數(shù)組，如下所示：experiment.js[ { fullName: 'vocab Experiment', shortName: 'vocab', ......}, { fullName: 'mind Experiment', shortName: 'mind', ......}, { fullName: 'whichenglish Experiment', shortName: 'whichenglish', ......},];它可以小于或大于實驗數(shù)組中的 3 個對象。如何將該對象數(shù)組映射到不同的組件作為道具，例如：import experiments from './experiment.js';// ......{experiments.map(e => (              <Vocab                id={e.shortName}                title={e.fullName}                duration={e.duration}                post={e.tagline}                img={require('../assets/images/quiz/Vocab.png')}                key={e.shortName}              />              {/* TODO */}              <Mind />              <WhichEnglish />            ))}
查看完整描述

4 回答

?
料青山看我應如是

TA貢獻1772條經(jīng)驗 獲得超8個贊

鑒于


[

 { fullName: 'vocab Experiment', shortName: 'vocab', ......},

 { fullName: 'mind Experiment', shortName: 'mind', ......},

 { fullName: 'whichenglish Experiment', shortName: 'whichenglish', ......},

];

鑒于列表中可以有任意數(shù)量的對象，我將使用if語句，如下所示：


{experiments.map(e => {

    if (e.shortName === 'vocab') {

        return (<Vocab

                 id={e.shortName}

                 title={e.fullName}

                 duration={e.duration}

                 post={e.tagline}

                 img={require('../assets/images/quiz/Vocab.png')}

                 key={e.shortName}

                />)

   } else if (e.shortName === 'mind') {

         return <Mind ... />

   } else if (e.shortName === 'whichenglish') {

         return <WhichEnglish ... />

   } else return null; // keep react happy

})}


查看完整回答
反對 回復 2022-08-04
?
尚方寶劍之說

TA貢獻1788條經(jīng)驗 獲得超4個贊

我認為您可以使用數(shù)組.find（）方法來達到此目的，并基于如下方式為每個實驗獲取確切的對象：shortName


const vocabProps = experiments.find(x => x.shortName === 'vocab') || {};

const mindProps = experiments.find(x => x.shortName === 'mind') || {};

const whichenglishProps = experiments.find(x => x.shortName === 'whichenglish') || {};

并且只需在道具上使用跨頁語法，例如：


<Vocab {...vocabProps} />

<Mind {...mindProps} />

<WhichEnglish {...whichenglishProps} />

或者像這樣，如果你想把額外的道具傳遞給組件。img


<Vocab data={vocabProps} img={require('...')}/>

<Mind data={mindProps} />

<WhichEnglish data={whichenglishProps} />


查看完整回答
反對 回復 2022-08-04
?
慕勒3428872

TA貢獻1848條經(jīng)驗 獲得超6個贊

這是你要找的嗎？


const ComponentByType = {

  vocab: Vocab,

  mind: Mind,

  whichEnglish: WhichEnglish

}


//...

{experiments.map(e => {

  const type = someHowToGetType(e)

  const Component = ComponentByType[type]

  return (<Component key={e.shortName} {{...e}}/>)

})}


查看完整回答
反對 回復 2022-08-04
?
慕工程0101907

TA貢獻1887條經(jīng)驗 獲得超5個贊

由于您需要將每個數(shù)組元素呈現(xiàn)到不同的組件，因此不能真正使用 array：：map，因為這更適合將數(shù)組映射到同一組件。


給定實驗數(shù)組


const experiments = [

  { fullName: 'vocab Experiment', shortName: 'vocab', ......},

  { fullName: 'mind Experiment', shortName: 'mind', ......},

  { fullName: 'whichenglish Experiment', shortName: 'whichenglish', ......},

];

可以使用數(shù)組解構將每個元素保存到命名變量中


const [vocab, mind, whichEnglish] = experiments;

然后將每個分散到適當?shù)慕M件中


<Vocab

  id={vocab.shortName}

  title={vocab.fullName}

  duration={vocab.duration}

  post={vocab.tagline}

  img={require('../assets/images/quiz/Vocab.png')}

/>

<Mind

  id={mind.shortName}

  title={mind.fullName}

  duration={mind.duration}

  post={mind.tagline}

  img={...}

/>

<WhichEnglish

  id={whichEnglish.shortName}

  title={whichEnglish.fullName}

  duration={whichEnglish.duration}

  post={whichEnglish.tagline}

  img={...}

/>


查看完整回答
反對 回復 2022-08-04
  • 4 回答
  • 0 關注
  • 152 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網(wǎng)微信公眾號