点击UMUIMAdditionalCoverage.js中Add按钮渲染VehicleInfoRender.js的实现方案

核心思路是通过状态控制组件的条件渲染，以下是具体实现步骤：

1. 基础方案：状态提升到共享父组件 #

由于UMUIMAdditionalCoverage和目标渲染的VehicleInfoRender大概率同属BasicLayout的子组件，我们在BasicLayout中添加状态来控制组件显示：

import UMUIMAdditionalCoverage from './path/to/UMUIMAdditionalCoverage';
import VehicleInfoRender from './path/to/VehicleInfoRender';
import { useState } from 'react';

const BasicLayout = () => {
  // 初始化状态：默认不显示VehicleInfoRender
  const [showVehicleInfo, setShowVehicleInfo] = useState(false);

  // 定义点击Add按钮后的回调函数
  const handleAddTrigger = () => {
    setShowVehicleInfo(true);
  };

  return (
    <div className="basic-layout">
      {/* 原有页面内容 */}
      {/* 将回调函数传递给UMUIMAdditionalCoverage组件 */}
      <UMUIMAdditionalCoverage onAddClick={handleAddTrigger} />
      {/* 条件渲染：状态为true时显示组件 */}
      {showVehicleInfo && <VehicleInfoRender />}
    </div>
  );
};

export default BasicLayout;

修改UMUIMAdditionalCoverage.js，接收父组件传递的回调函数并绑定到"Add"按钮：

// UMUIMAdditionalCoverage.js
const UMUIMAdditionalCoverage = ({ onAddClick }) => {
  return (
    <div className="additional-coverage">
      {/* 组件原有内容 */}
      <button onClick={onAddClick}>Add</button>
    </div>
  );
};

export default UMUIMAdditionalCoverage;

2. 复杂层级场景：使用React Context共享状态 #

如果组件层级较深（UMUIMAdditionalCoverage嵌套多层），可以用Context避免props层层传递：

第一步：创建状态Context #

// VehicleInfoContext.js
import { createContext, useState, useContext } from 'react';

const VehicleInfoContext = createContext();

export const VehicleInfoProvider = ({ children }) => {
  const [showVehicleInfo, setShowVehicleInfo] = useState(false);

  const triggerShowVehicleInfo = () => {
    setShowVehicleInfo(true);
  };

  return (
    <VehicleInfoContext.Provider value={{ showVehicleInfo, triggerShowVehicleInfo }}>
      {children}
    </VehicleInfoContext.Provider>
  );
};

export const useVehicleInfo = () => useContext(VehicleInfoContext);

第二步：在App.js中包裹Provider #

import './App.css';
import { VehicleInfoProvider } from './VehicleInfoContext';
import BasicLayout from './path/to/BasicLayout';

const App = () => {
  return (
    <VehicleInfoProvider>
      <BasicLayout />
    </VehicleInfoProvider>
  );
};

export default App;

第三步：在子组件中使用Context #

修改UMUIMAdditionalCoverage.js：

import { useVehicleInfo } from './VehicleInfoContext';

const UMUIMAdditionalCoverage = () => {
  const { triggerShowVehicleInfo } = useVehicleInfo();

  return (
    <div className="additional-coverage">
      {/* 原有内容 */}
      <button onClick={triggerShowVehicleInfo}>Add</button>
    </div>
  );
};

修改BasicLayout（或任意需要渲染VehicleInfoRender的组件）：

import VehicleInfoRender from './path/to/VehicleInfoRender';
import { useVehicleInfo } from './VehicleInfoContext';

const BasicLayout = () => {
  const { showVehicleInfo } = useVehicleInfo();

  return (
    <div className="basic-layout">
      {/* 原有内容 */}
      <UMUIMAdditionalCoverage />
      {showVehicleInfo && <VehicleInfoRender />}
    </div>
  );
};

内容的提问来源于stack exchange，提问作者Akshay