如何在 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

鉴于

[

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

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

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

];

鉴于列表中可以有任意数量的对象，我将使用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

})}

Answer 2

我认为您可以使用数组.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} />

Answer 3

这是你要找的吗？

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

})}

Answer 4

由于您需要将每个数组元素呈现到不同的组件，因此不能真正使用 array：：map，因为这更适合将数组映射到同一组件。

给定实验数组

const experiments = [

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

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

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

];

可以使用数组解构将每个元素保存到命名变量中

const [vocab, mind, whichEnglish] = experiments;

然后将每个分散到适当的组件中

<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={...}

/>