有条件地渲染组件

拉面_情人912
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 的新手,所以任何提示都会有所帮助。

谢谢!

阿比纳夫·康德

我假设 TABS.map 应该是 Funks.map。

现在替换 /* 如何渲染组件?*/ 和 :

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

这将修复您当前的代码。但这不是呈现组件的理想方式。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章