React Context，如何更新一个分支中的上下文，以在另一个分支中使用

Question

我可以使用 React 上下文 API 来管理 itemsInCart 的全局状态，允许 Product 更新上下文，并且只有 Nav 可以使用和重新-使成为。我不想在更改时重新呈现整个应用程序。

阅读 React 文档，我看到 Context 用户需要在提供者的下游，所以不确定这是否可行

代码（大大简化）：

 function NavBar () {
    const [itemsInCart, setItemsInCart] = useState(0)

    return (
      <button onClick={openCart}>{itemsInCart}</button>
    )
  }

 function Product() {

    function incrementCart () {
      ???
    }

    return (
      <button onClick={() => incrementCart}>add product to cart</button>
    )
  }

  function App () {
    return (
      <NavBar/>
      <Router>
        <Product/>
      </Router>
    )
  }

Answer 1

您想使用 useContext 来完成。

A component calling useContext will always re-render when the context value changes. If re-rendering the component is expensive, you can optimize it by using memoization.

例如：

export const CartContext= React.createContext();

export const CartProvider = ({ children }) => {
  const [itemsInCart, setItemsInCart] = useState(null);

  return (
    <CartContext.Provider
      value={
        itemsInCart
      }
    >
      {children}
    </CartContext.Provider>
  );
};

然后在某些功能中，您可以使用它来更新购物车：

  const {itemsInCart, setItemsInCart} = useContext(CartContext);

最后，像这样更新 Provider 包装：

  function App () {
    return (
     <CartProvider>
      <NavBar/>
      <Router>
        <Product/>
      </Router>
     </CartProvider>
    )
  }

React Context，如何更新一个分支中的上下文，以在另一个分支中使用

React Context, how to update context in one branch, to use in another branch

reactjs

react-context