有条件地呈现组件

0ve6wy6x 于 2021-09-29 发布在 Java

关注(0)|答案(2)|浏览(319)

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参数渲染组件？我是新手，所以任何提示都会很有帮助。
谢谢

JavaScript reactjs

来源：https://stackoverflow.com/questions/68542794/render-component-conditionally

2条答案

按热度按时间

vaj7vani1#

tabs.map应该让我害怕，我想是吧。
现在替换/如何渲染组件？/与： (component === 'Home')? <Home/> : (component ==='About') ? <About/> : <Contact/> 这将修复您当前的代码。但这不是渲染组件的理想方式。

赞(0）回复(0）举报 2021-09-29

z9smfwbn2#

您需要更新数组中的组件值，如下所示，以渲染这些组件；

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

然后Map数组并按如下方式输出，这将输出您的组件。

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

请注意，根据命名约定，组件文件名必须以首字母大写开始命名。

赞(0）回复(0）举报 2021-09-29

我来回答

有条件地呈现组件

2条答案

相关问题

热门标签

最新问答