React中为路由子组件添加事件处理器失败求助

你尝试通过React.cloneElement修改路由组件的思路方向没错，但实现逻辑存在问题，导致props无法传递到目标组件。以下是具体问题分析和可行的解决方案：

问题根源 #

1. RemapChildren组件未接收children参数，直接使用children会导致变量未定义
2. 你修改的是<Route>组件本身，但<Route>不会将自身props传递给它的element属性里的组件
3. 多层React.Children.map时未保留修改后的元素，最终返回的还是原组件，变更未生效

解决方案 #

方法一：直接给路由组件传props（简单直接）

如果路由数量不多，直接在每个路由的element中给组件手动传入所需props：

function App() {
  // 假设这是你的购物车更新函数
  const updateShoppingCartItems = (items) => {
    // 处理购物车更新逻辑
    console.log("更新购物车:", items);
  };

  return (
    <WebsiteLayout>
      <Routes>
        <Route path="/">
          <Route index element={<Home setShoppingCartItems={updateShoppingCartItems} />} />
          <Route path="/login" element={<Login setShoppingCartItems={updateShoppingCartItems} />} />
          <Route path="/rubrieken" element={<Rubrieken setShoppingCartItems={updateShoppingCartItems} />} />
          <Route path="/producten" element={<Producten setShoppingCartItems={updateShoppingCartItems} />}/>
          <Route path="/product" element={<Product setShoppingCartItems={updateShoppingCartItems} />} />
          <Route path="/bestellen" element={<Bestellen setShoppingCartItems={updateShoppingCartItems} />} />
        </Route>
      </Routes>
    </WebsiteLayout>
  );
}

方法二：封装自定义Route组件（适合大量路由）

如果路由数量较多，可以封装一个自动注入props的自定义Route组件，避免重复代码：

// 自定义Route组件
function CustomRoute({ element, ...rest }) {
  const updateShoppingCartItems = (items) => {
    // 处理购物车更新逻辑
    console.log("更新购物车:", items);
  };

  // 克隆element中的组件并注入props
  const enhancedElement = React.cloneElement(element, {
    setShoppingCartItems: updateShoppingCartItems
  });

  return <Route {...rest} element={enhancedElement} />;
}

// 使用自定义Route
function App() {
  return (
    <WebsiteLayout>
      <Routes>
        <Route path="/">
          <CustomRoute index element={<Home />} />
          <CustomRoute path="/login" element={<Login />} />
          <CustomRoute path="/rubrieken" element={<Rubrieken />} />
          <CustomRoute path="/producten" element={<Producten />}/>
          <CustomRoute path="/product" element={<Product />} />
          <CustomRoute path="/bestellen" element={<Bestellen />} />
        </Route>
      </Routes>
    </WebsiteLayout>
  );
}

方法三：使用React Context（全局共享场景）

如果你的购物车操作需要在多个组件中共享，使用Context是更优雅的方案，无需逐个传递props：

// 创建购物车Context
const ShoppingCartContext = React.createContext();

// Context Provider组件
function ShoppingCartProvider({ children }) {
  const updateShoppingCartItems = (items) => {
    // 处理购物车更新逻辑
    console.log("更新购物车:", items);
  };

  return (
    <ShoppingCartContext.Provider value={{ updateShoppingCartItems }}>
      {children}
    </ShoppingCartContext.Provider>
  );
}

// 在App中包裹Provider
function App() {
  return (
    <ShoppingCartProvider>
      <WebsiteLayout>
        <Routes>
          {/* 原路由代码保持不变 */}
          <Route path="/">
            <Route index element={<Home />} />
            <Route path="/login" element={<Login />} />
            <Route path="/rubrieken" element={<Rubrieken />} />
            <Route path="/producten" element={<Producten />}/>
            <Route path="/product" element={<Product />} />
            <Route path="/bestellen" element={<Bestellen />} />
          </Route>
        </Routes>
      </WebsiteLayout>
    </ShoppingCartProvider>
  );
}

// 在子组件中使用Context
function Home() {
  const { updateShoppingCartItems } = React.useContext(ShoppingCartContext);
  
  // 调用购物车更新方法
  const handleAddToCart = () => {
    updateShoppingCartItems([{ id: 1, name: "示例商品" }]);
  };

  return <button onClick={handleAddToCart}>添加到购物车</button>;
}

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