使用导航栏动态显示/加载React.js组件onClick？

使用导航栏动态显示/加载React.js组件onClick是一种常见的前端开发技术，可以实现在用户点击导航栏菜单时动态加载相应的React.js组件，以提升用户体验和页面加载速度。

具体实现方法如下：

首先，需要在导航栏组件中定义菜单项，并为每个菜单项绑定一个onClick事件处理函数。
在onClick事件处理函数中，根据菜单项的点击情况，使用React的动态组件加载功能，动态地渲染相应的组件。
在React中，可以使用React.lazy和Suspense来实现动态组件加载。React.lazy函数可以让你像渲染常规组件一样渲染动态导入的组件。Suspense组件可以在等待动态组件加载时显示一个加载中的提示。

下面是一个示例代码：

import React, { lazy, Suspense, useState } from 'react';

// 导入需要动态加载的组件
const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));
const Contact = lazy(() => import('./Contact'));

const Navigation = () => {
  const [selectedComponent, setSelectedComponent] = useState(null);

  const handleMenuClick = (component) => {
    setSelectedComponent(component);
  };

  return (
    <div>
      <ul>
        <li onClick={() => handleMenuClick('home')}>Home</li>
        <li onClick={() => handleMenuClick('about')}>About</li>
        <li onClick={() => handleMenuClick('contact')}>Contact</li>
      </ul>

      <Suspense fallback={<div>Loading...</div>}>
        {selectedComponent === 'home' && <Home />}
        {selectedComponent === 'about' && <About />}
        {selectedComponent === 'contact' && <Contact />}
      </Suspense>
    </div>
  );
};

export default Navigation;

在上述示例代码中，我们定义了一个Navigation组件，其中包含了一个ul列表作为导航栏菜单。每个菜单项都绑定了一个onClick事件处理函数，根据点击的菜单项，更新selectedComponent的状态值。

在Suspense组件中，根据selectedComponent的值动态渲染相应的组件。在组件加载过程中，可以通过fallback属性设置一个加载中的提示。

这样，当用户点击导航栏菜单时，就会动态加载相应的React组件，实现了导航栏动态显示/加载React.js组件的效果。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云云函数（SCF）。