当前位置：首页 > React

React如何点击以后再渲染组件

2026-01-25 18:46:49React

条件渲染实现点击后渲染组件

在React中实现点击后再渲染组件，可以通过状态管理控制组件的渲染条件。核心思路是利用useState钩子存储一个布尔值，通过点击事件切换该状态。

import React, { useState } from 'react';

function App() {
  const [showComponent, setShowComponent] = useState(false);

  return (
    <div>
      <button onClick={() => setShowComponent(true)}>
        点击渲染组件
      </button>
      {showComponent && <MyComponent />}
    </div>
  );
}

function MyComponent() {
  return <div>这是被动态渲染的组件</div>;
}

动态加载组件方式

对于大型组件，可以结合React.lazy和Suspense实现点击后的动态加载，优化性能：

import React, { Suspense, useState } from 'react';
const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  const [loadComponent, setLoadComponent] = useState(false);

  return (
    <div>
      <button onClick={() => setLoadComponent(true)}>
        点击加载组件
      </button>
      {loadComponent && (
        <Suspense fallback={<div>加载中...</div>}>
          <LazyComponent />
        </Suspense>
      )}
    </div>
  );
}

使用useEffect处理副作用

当需要执行异步操作后再渲染组件时，可以结合useEffect实现：

import React, { useState, useEffect } from 'react';

function App() {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(false);

  const fetchData = async () => {
    setIsLoading(true);
    const response = await fetch('api/data');
    setData(await response.json());
    setIsLoading(false);
  };

  return (
    <div>
      <button onClick={fetchData}>获取数据并渲染</button>
      {isLoading && <div>加载中...</div>}
      {data && !isLoading && <DataDisplay data={data} />}
    </div>
  );
}

高阶组件封装模式

对于需要复用的点击渲染逻辑，可以创建高阶组件：

React如何点击以后再渲染组件

function withClickRender(WrappedComponent) {
  return function(props) {
    const [visible, setVisible] = useState(false);

    return (
      <>
        <button onClick={() => setVisible(true)}>
          显示组件
        </button>
        {visible && <WrappedComponent {...props} />}
      </>
    );
  };
}

// 使用方式
const EnhancedComponent = withClickRender(MyComponent);