有条件地渲染组件

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