React中如何在组件间导出变量（非完整组件）？是否有类似module.exports的关键字？

首先明确：React里没有和Node.js的module.exports完全等价的方式来导出组件内部的局部变量——你代码里的objHead、objDetails是AddCart函数内的局部变量，作用域仅限于这个函数，没法直接导出给其他组件用。要实现组件间的数据传递，得用React的状态管理或组件通信机制，以下是几种实用方案：

1. 父组件回调传递（最常用，适合父子/近邻组件） #

核心思路是让父组件传一个回调函数给Add组件，当点击"Add to cart"按钮时，把需要的数据通过这个回调函数传给父组件，父组件再把数据转发给其他需要的组件。

修改你的Add组件：

function Add({ title, details, onAddToCart }) { // 新增onAddToCart回调props
  const AddCart = () => {
    const obj = {
      head: title,
      body: details
    };
    // 调用父组件传来的回调，把数据传出去
    onAddToCart(obj);
  };

  return (
    <div>
      <div className="box">
        <h5 id="AddHead">Add header</h5>
        <p>{title}</p>
        <p>{details}</p>
      </div>
      <button className="btn" onClick={AddCart}>Add to cart</button>
      <hr />
    </div>
  );
}

export default Add;

然后在父组件（比如App）里使用Add，接收数据并传递给其他组件：

import { useState } from 'react';
import Add from './Add';
import Cart from './Cart'; // 假设这是需要数据的另一个组件

function App() {
  const [cartItems, setCartItems] = useState([]);

  const handleAddToCart = (item) => {
    setCartItems(prev => [...prev, item]);
  };

  return (
    <div>
      <Add 
        title="示例标题" 
        details="示例详情" 
        onAddToCart={handleAddToCart} 
      />
      {/* 把cartItems传给Cart组件 */}
      <Cart items={cartItems} />
    </div>
  );
}

2. React Context（适合跨多层组件传递） #

如果需要把数据传给嵌套很深的组件，用Context更方便，不用逐层传递props。

首先创建一个CartContext：

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

const CartContext = createContext();

export function CartProvider({ children }) {
  const [cartItems, setCartItems] = useState([]);

  const addToCart = (item) => {
    setCartItems(prev => [...prev, item]);
  };

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

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

然后在Add组件里使用Context：

import { useCart } from './CartContext';

function Add({ title, details }) {
  const { addToCart } = useCart();

  const AddCart = () => {
    const obj = {
      head: title,
      body: details
    };
    addToCart(obj);
  };

  return (
    <div>
      <div className="box">
        <h5 id="AddHead">Add header</h5>
        <p>{title}</p>
        <p>{details}</p>
      </div>
      <button className="btn" onClick={AddCart}>Add to cart</button>
      <hr />
    </div>
  );
}

export default Add;

最后在根组件（比如App）里包裹Provider：

import { CartProvider } from './CartContext';
import Add from './Add';
import Cart from './Cart';

function App() {
  return (
    <CartProvider>
      <Add title="示例标题" details="示例详情" />
      <Cart />
    </CartProvider>
  );
}

Cart组件就可以通过useCart获取数据：

import { useCart } from './CartContext';

function Cart() {
  const { cartItems } = useCart();

  return (
    <div>
      <h3>购物车</h3>
      {cartItems.map((item, index) => (
        <div key={index}>
          <h4>{item.head}</h4>
          <p>{item.body}</p>
        </div>
      ))}
    </div>
  );
}

export default Cart;

3. 状态管理库（适合复杂应用） #

如果你的应用有很多组件需要共享状态，或者状态逻辑复杂，可以用Redux、Zustand这类状态管理库，统一管理购物车数据，Add组件触发添加动作，其他组件订阅状态即可。

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