如何在 React 中将一组对象映射到不同的组件 props？

Question

我有一个对象数组，如下所示：experiment.js

[

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

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

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

];

它可以小于或大于实验数组中的 3 个对象。

如何将该对象数组映射到不同的组件作为道具，例如：

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 />

            ))}

Answer 1

鉴于[&nbsp;{ fullName: 'vocab Experiment', shortName: 'vocab', ......},&nbsp;{ fullName: 'mind Experiment', shortName: 'mind', ......},&nbsp;{ fullName: 'whichenglish Experiment', shortName: 'whichenglish', ......},];鉴于列表中可以有任意数量的对象，我将使用if语句，如下所示：{experiments.map(e => {&nbsp; &nbsp; if (e.shortName === 'vocab') {&nbsp; &nbsp; &nbsp; &nbsp; return (<Vocab&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;id={e.shortName}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;title={e.fullName}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;duration={e.duration}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;post={e.tagline}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;img={require('../assets/images/quiz/Vocab.png')}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;key={e.shortName}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />)&nbsp; &nbsp;} else if (e.shortName === 'mind') {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;return <Mind ... />&nbsp; &nbsp;} else if (e.shortName === 'whichenglish') {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;return <WhichEnglish ... />&nbsp; &nbsp;} else return null; // keep react happy})}

Answer 2

我认为您可以使用数组.find（）方法来达到此目的，并基于如下方式为每个实验获取确切的对象：shortNameconst 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} />

Answer 3

这是你要找的吗？const ComponentByType = {&nbsp; vocab: Vocab,&nbsp; mind: Mind,&nbsp; whichEnglish: WhichEnglish}//...{experiments.map(e => {&nbsp; const type = someHowToGetType(e)&nbsp; const Component = ComponentByType[type]&nbsp; return (<Component key={e.shortName} {{...e}}/>)})}

Answer 4

由于您需要将每个数组元素呈现到不同的组件，因此不能真正使用 array：：map，因为这更适合将数组映射到同一组件。给定实验数组const experiments = [&nbsp; { fullName: 'vocab Experiment', shortName: 'vocab', ......},&nbsp; { fullName: 'mind Experiment', shortName: 'mind', ......},&nbsp; { fullName: 'whichenglish Experiment', shortName: 'whichenglish', ......},];可以使用数组解构将每个元素保存到命名变量中const [vocab, mind, whichEnglish] = experiments;然后将每个分散到适当的组件中<Vocab&nbsp; id={vocab.shortName}&nbsp; title={vocab.fullName}&nbsp; duration={vocab.duration}&nbsp; post={vocab.tagline}&nbsp; img={require('../assets/images/quiz/Vocab.png')}/><Mind&nbsp; id={mind.shortName}&nbsp; title={mind.fullName}&nbsp; duration={mind.duration}&nbsp; post={mind.tagline}&nbsp; img={...}/><WhichEnglish&nbsp; id={whichEnglish.shortName}&nbsp; title={whichEnglish.fullName}&nbsp; duration={whichEnglish.duration}&nbsp; post={whichEnglish.tagline}&nbsp; img={...}/>