React跨组件传值问题：交易模拟器订单数据传递至兄弟Tab组件

1. 状态提升（最直接的轻量方案） #

把订单数据的状态提到共同的顶层祖先Page.js里，通过props传递方法和数据：

• 在Page.js里定义订单数组状态orders，以及添加订单的方法addOrder
• 把addOrder逐层传给Trading.js→Select.js→Modalbuy.js，在弹窗获取到订单数据后调用这个方法
• 同时把orders传给Tab页里的Table.js，直接渲染数据

代码片段示例：

// Page.js
import { useState } from 'react';
import Trading from './Trading';
import TabWithTable from './TabWithTable';

function Page() {
  const [orders, setOrders] = useState([]);

  const addOrder = (newOrder) => {
    setOrders(prev => [...prev, newOrder]);
  };

  return (
    <div>
      <Trading onAddOrder={addOrder} />
      <TabWithTable orders={orders} />
    </div>
  );
}

// Modalbuy.js
function Modalbuy({ onAddOrder }) {
  const handleConfirm = () => {
    // 这里替换成弹窗里实际获取到的订单数据
    const newOrder = {
      side: 'buy',
      price: 156.2,
      volume: 5,
      timestamp: new Date().toLocaleString()
    };
    onAddOrder(newOrder);
    // 执行关闭弹窗的逻辑
  };

  return (
    <div className="modal">
      {/* 弹窗内的表单/数据选择组件 */}
      <button onClick={handleConfirm}>确认下单</button>
    </div>
  );
}

2. React Context（避免多层props传递） #

如果组件层级很深，逐层传props太繁琐，用Context共享状态：

• 单独创建OrderContext.js文件，封装订单状态和操作方法
• 在Page.js里用OrderContext.Provider包裹所有子组件
• 在Modalbuy.js和Table.js里直接用useContext钩子获取方法和数据，不用再逐层传props

代码片段示例：

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

const OrderContext = createContext();

export function OrderProvider({ children }) {
  const [orders, setOrders] = useState([]);

  const addOrder = (newOrder) => {
    setOrders(prev => [...prev, newOrder]);
  };

  return (
    <OrderContext.Provider value={{ orders, addOrder }}>
      {children}
    </OrderContext.Provider>
  );
}

export function useOrder() {
  return useContext(OrderContext);
}

// Page.js
import { OrderProvider } from './OrderContext';
import Trading from './Trading';
import TabWithTable from './TabWithTable';

function Page() {
  return (
    <OrderProvider>
      <Trading />
      <TabWithTable />
    </OrderProvider>
  );
}

// Modalbuy.js
import { useOrder } from './OrderContext';

function Modalbuy() {
  const { addOrder } = useOrder();

  const handleConfirm = () => {
    const newOrder = { /* 订单数据 */ };
    addOrder(newOrder);
  };

  return <div className="modal">{/* 弹窗内容 */}</div>;
}

// Table.js
import { useOrder } from './OrderContext';

function Table() {
  const { orders } = useOrder();

  return (
    <table>
      <thead>
        <tr>
          <th>方向</th>
          <th>价格</th>
          <th>数量</th>
          <th>时间</th>
        </tr>
      </thead>
      <tbody>
        {orders.map((order, idx) => (
          <tr key={idx}>
            <td>{order.side}</td>
            <td>{order.price}</td>
            <td>{order.volume}</td>
            <td>{order.timestamp}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

3. 状态管理库（适合复杂场景） #

如果你的经纪商模拟器后续要加更多复杂功能（比如订单撤销、多账户数据同步），可以用Zustand、Redux或者Jotai这类全局状态管理库，把订单数据存在全局 store 里，任何组件都能直接读写。

比如Zustand的示例：

// store.js
import { create } from 'zustand';

export const useOrderStore = create((set) => ({
  orders: [],
  addOrder: (newOrder) => set(state => ({ orders: [...state.orders, newOrder] }))
}));

// Modalbuy.js
import { useOrderStore } from './store';

function Modalbuy() {
  const addOrder = useOrderStore(state => state.addOrder);

  const handleConfirm = () => {
    const newOrder = { /* 订单数据 */ };
    addOrder(newOrder);
  };

  return <div className="modal">{/* 弹窗内容 */}</div>;
}

// Table.js
import { useOrderStore } from './store';

function Table() {
  const orders = useOrderStore(state => state.orders);

  return <table>{/* 渲染订单表格 */}</table>;
}

这三种方案里，状态提升适合简单层级的小项目，Context适合中等复杂度的跨层级场景，状态管理库则更适配功能复杂的大型应用，根据你的模拟器当前规模选就行。

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