Next js如何渲染与import同名的item数组

Question

我尝试按照下面的代码渲染与导入同名的项目数组，但没有成功。 有人有想法吗？谢谢！

此测试无效。

import _01 from './components/01.js' 
import _02 from './components/02.js' 
import _03 from './components/03.js'

export default function xpto(){ 
    const myArray = [{Comp:'_01'},{Comp:'_02'},{Comp:'_03'}]

    return (
        <div>
            {myArray.map((Comp, index)=>{
                <div key={index}>
                    <${Comp} /> {/*this would be solved with a simple macro substitution, how to do?*/}
                </div>
            })}
       </div>
    )
}

Answer 1

这是你的箭头函数作为参数传递给

map

。如果你用括号，它几乎就像一个普通的

function

，所以你必须做一个return语句。

myArray.map((Comp, index)=>{
  return (
    <div key={index}>
      <${Comp}/>
    </div>
  );
});

如果你的函数是单条语句，你可以去掉括号。如果它只是一个 return 语句，你可以省略

return

关键字。

myArray.map((Comp, index)=>
  <div key={index}>
    <${Comp}/>
  </div>
);

此外，如果你在那里打印

Comp

，你会得到整个对象，比如

{Comp: '01'}

，所以你可能想在

Comp.Comp

里面打印

map

。

所以问题与导入或 Next.js 没有任何关系。