javascript - 如何在另一个 const React.js 中映射映射的 const

Question

好吧，假设我有 3 个数组，如下所示:

import React from 'react';

const hello = ['hello', 'hi', 'sup'];
const bye = ['bye', 'goodbye', 'see ya'];
const names = ['john', 'bob', 'jill'];

然后假设我想像这样映射每个数组:

const helloWorld = hello.map(helloCode => {
  return (
    <div>{helloCode}</div>
  );
});

const goodBye = bye.map(byeCode => {
  return (
    <div>{byeCode}</div>
  );
});

const allNames = names.map(nameCode => {
  return (
    <div>{nameCode}</div>
  );
});  

现在假设我想获取所有三个映射函数并像这样映射它们:

const all = [helloWorld, byeWorld, allNames];

const Everything = all.map(allCode => {
    return (
        <div>{allCode}</div>
    );
});  

我该如何去做，因为这种方式似乎行不通。我真的只需要 react 中的答案。无论如何，如果有人能帮助我解决这个问题，我将不胜感激。谢谢!

Answer 1

你可以像这样展平数组

const all = [helloWorld, byeWorld, allNames];
const flattenedArray = [].concat.apply([], all)
// or use array destructuring
// const flattenedArray = [...helloWorld, ...byeWorld, ...allNames]
const Everything = flattenedArray.map(allCode => {
    return (
        <div>{allCode}</div>
    );
});