有條件地渲染組件

Question

import Home from "./home";
import About from "./about";
import Contact from "./contact";

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

export default class Funky extends Component {
  render() {
    return (
      {Funks.map(({ component, isActive}) => isActive ? /* how to render component? */ : null )}
    )
  }
}

如何使用 component 參數渲染組件？ 我是 React 的新手，所以任何提示都會有所幫助。

謝謝！

Answer 1

您需要更新數組中的組件值，如下所示以呈現這些組件；

const Funks = [
  {
    component: <Home />,
    label: "Home",
    isActive: true
  },
  {
    component: <About />,
    label: "About",
    isActive: false
  },
  {
    component: <Contact />,
    label: "Contact",
    isActive: false
  }
];

然后映射數組並按如下方式輸出它，這將輸出您的組件。

return Funks.map((item) => (item.isActive ? item.component : null));

請注意，根據命名約定，組件文件名必須以首字母大寫開頭。

Answer 2

我假設 TABS.map 應該是 Funks.map。

現在替換 /* 如何渲染組件？ */ 和 ：

(component === 'Home')? <Home/> : (component ==='About') ? <About/> : <Contact/>

這將修復您當前的代碼。 但這不是呈現組件的理想方式。