有條件地渲染組件

Question

const TABS = [
  {
    component: Home,
    label: "Home",
    isActive: true
  },
  {
    component: About,
    label: "About",
    isActive: false
  },
  {
    component: Contact,
    label: "Contact",
    isActive: false
  }
];

...
render() {
  return (
    {TABS.map(({ component, isActive}) => isActive ? /* how do i do it? */ : "false" )}
  )
}

我不確定如何渲染組件，因為無論我做什么似乎都會導致錯誤。 我是 React 的新手，因此感謝您的任何幫助。

謝謝！

Answer 1

你可以這樣做：

render() {
  return (
    {TABS.map(({ component, isActive}) => isActive ? <component /> : null )}
  )
}