React项目不跳转页面跨组件传递数据/状态的实现方案求助

下面提供三种可行的方案，帮你实现Buy组件的isActive状态与Cart组件共享，且无需页面跳转：

方法1：状态提升到共同父组件 #

这是React组件共享状态最直接的方式，把isActive状态提到Buy和Cart的共同父组件中，再通过props传递给两个组件：

1. 在共同父组件（比如App.js）中定义状态和修改方法：

import { useState } from "react";
import Buy from "./path/to/Buy";
import Cart from "./Pages/Cart";

function App() {
  const [isActive, setIsActive] = useState(false);

  const toggleIsActive = () => {
    setIsActive(prev => !prev);
  };

  return (
    <div>
      <Buy isActive={isActive} toggleIsActive={toggleIsActive} />
      <Cart isActive={isActive} />
    </div>
  );
}

export default App;

2. 修改Buy组件，使用父组件传入的props：

import { useState } from "react"

const Buy = ({ isActive, toggleIsActive }) => {
  const [buttonText, setButtonText] = useState("Add to cart")

  const addToCart = () => {
    const newIsActive = !isActive;
    toggleIsActive();
    setButtonText(newIsActive ? "Added to the cart ✓" : "Add to cart");
  }

  return (
    <div>
      <button
        className='buy'
        style={{
          fontSize: isActive ? "0.8rem" : "1rem",
          color: isActive ? "lightgray" : "white",
        }}
        onClick={addToCart}
      >
        {buttonText}
      </button>
    </div>
  )
}

export default Buy

3. Cart组件接收状态并执行逻辑：

const Cart = ({ isActive }) => {
  // 根据isActive执行对应逻辑
  if (isActive) {
    console.log("执行添加购物车后的逻辑");
    // 比如更新购物车列表、显示提示等
  }

  return (
    <div className="cart">
      {/* 购物车内容 */}
    </div>
  );
}

export default Cart;

方法2：使用Context API #

如果Buy和Cart组件层级较深，层层传props太麻烦，可以用React的Context API实现跨组件状态共享：

1. 创建CartContext.js文件：

import { createContext, useContext, useState } from "react";

const CartContext = createContext();

export function CartProvider({ children }) {
  const [isActive, setIsActive] = useState(false);

  const toggleIsActive = () => {
    setIsActive(prev => !prev);
  };

  return (
    <CartContext.Provider value={{ isActive, toggleIsActive }}>
      {children}
    </CartContext.Provider>
  );
}

export function useCart() {
  return useContext(CartContext);
}

2. 在根组件中用CartProvider包裹组件：

import { CartProvider } from "./CartContext";
import Buy from "./path/to/Buy";
import Cart from "./Pages/Cart";

function App() {
  return (
    <CartProvider>
      <Buy />
      <Cart />
    </CartProvider>
  );
}

export default App;

3. 修改Buy组件，通过自定义hook获取状态：

import { useState } from "react"
import { useCart } from "./CartContext"

const Buy = () => {
  const [buttonText, setButtonText] = useState("Add to cart")
  const { isActive, toggleIsActive } = useCart()

  const addToCart = () => {
    const newIsActive = !isActive;
    toggleIsActive();
    setButtonText(newIsActive ? "Added to the cart ✓" : "Add to cart");
  }

  return (
    <div>
      <button
        className='buy'
        style={{
          fontSize: isActive ? "0.8rem" : "1rem",
          color: isActive ? "lightgray" : "white",
        }}
        onClick={addToCart}
      >
        {buttonText}
      </button>
    </div>
  )
}

export default Buy

4. Cart组件通过hook获取状态：

import { useCart } from "./CartContext";

const Cart = () => {
  const { isActive } = useCart();

  if (isActive) {
    // 执行对应逻辑
  }

  return (
    <div className="cart">
      {/* 购物车内容 */}
    </div>
  );
}

export default Cart;

方法3：使用Redux Toolkit（适合复杂项目） #

如果项目需要多处共享状态或状态逻辑复杂，推荐用Redux Toolkit：

1. 安装依赖：

npm install @reduxjs/toolkit react-redux

2. 创建cartSlice.js：

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  isActive: false,
};

const cartSlice = createSlice({
  name: "cart",
  initialState,
  reducers: {
    toggleIsActive: (state) => {
      state.isActive = !state.isActive;
    },
  },
});

export const { toggleIsActive } = cartSlice.actions;
export default cartSlice.reducer;

3. 配置store.js：

import { configureStore } from "@reduxjs/toolkit";
import cartReducer from "./features/cart/cartSlice";

export const store = configureStore({
  reducer: {
    cart: cartReducer,
  },
});

4. 根组件中包裹Provider：

import { Provider } from "react-redux";
import { store } from "./store";
import Buy from "./path/to/Buy";
import Cart from "./Pages/Cart";

function App() {
  return (
    <Provider store={store}>
      <Buy />
      <Cart />
    </Provider>
  );
}

export default App;

5. 修改Buy组件，触发状态修改：

import { useState } from "react"
import { useDispatch, useSelector } from "react-redux";
import { toggleIsActive } from "./features/cart/cartSlice";

const Buy = () => {
  const [buttonText, setButtonText] = useState("Add to cart")
  const dispatch = useDispatch();
  const isActive = useSelector(state => state.cart.isActive);

  const addToCart = () => {
    const newIsActive = !isActive;
    dispatch(toggleIsActive());
    setButtonText(newIsActive ? "Added to the cart ✓" : "Add to cart");
  }

  return (
    <div>
      <button
        className='buy'
        style={{
          fontSize: isActive ? "0.8rem" : "1rem",
          color: isActive ? "lightgray" : "white",
        }}
        onClick={addToCart}
      >
        {buttonText}
      </button>
    </div>
  )
}

export default Buy

6. Cart组件获取状态：

import { useSelector } from "react-redux";

const Cart = () => {
  const isActive = useSelector(state => state.cart.isActive);

  if (isActive) {
    // 执行对应逻辑
  }

  return (
    <div className="cart">
      {/* 购物车内容 */}
    </div>
  );
}

export default Cart;

内容的提问来源于stack exchange，提问作者M. Khromov