在 React 中，組件之間傳遞變量的常見方法有以下幾種：

1. 通過 Props 傳遞數據

• 父組件通過 props 向子組件傳遞數據。子組件通過 props 來接收數據。

示例：

function ParentComponent() {const parentData = "Hello from Parent!";return <ChildComponent data={parentData} />;
}function ChildComponent({ data }) {return <div>{data}</div>;
}

2. 通過回調函數傳遞數據

• 父組件可以傳遞一個回調函數給子組件，子組件通過調用該回調函數向父組件傳遞數據。

示例：

function ParentComponent() {const [childData, setChildData] = useState("");const handleDataFromChild = (data) => {setChildData(data);};return (<div><ChildComponent sendDataToParent={handleDataFromChild} /><p>Data from child: {childData}</p></div>);
}function ChildComponent({ sendDataToParent }) {return (<button onClick={() => sendDataToParent("Hello from Child!")}>Send Data to Parent</button>);
}

3. 通過 Context API 傳遞數據

• Context API 允許你跨越組件樹層級來傳遞數據，避免層層傳遞 props。

示例：

const MyContext = React.createContext();function ParentComponent() {const parentData = "Data from Parent";return (<MyContext.Provider value={parentData}><ChildComponent /></MyContext.Provider>);
}function ChildComponent() {const data = useContext(MyContext);return <div>{data}</div>;
}

4. 通過 Redux 管理全局狀態

• 如果應用中需要跨多個組件共享復雜的狀態，可以使用 Redux 或其他狀態管理庫。Redux 將狀態集中在一個單一的 store 中，任何組件都可以訪問和更新這些狀態。

示例：

// actions.js
export const setData = (data) => ({ type: 'SET_DATA', payload: data });// reducer.js
const initialState = { data: "" };function reducer(state = initialState, action) {switch (action.type) {case 'SET_DATA':return { ...state, data: action.payload };default:return state;}
}// ParentComponent.js
import { useDispatch } from 'react-redux';
import { setData } from './actions';function ParentComponent() {const dispatch = useDispatch();return (<button onClick={() => dispatch(setData("Hello from Redux!"))}>Send Data to Store</button>);
}// ChildComponent.js
import { useSelector } from 'react-redux';function ChildComponent() {const data = useSelector(state => state.data);return <div>{data}</div>;
}

5. 通過事件總線（如 Node.js 的 EventEmitter）

• 使用事件總線（在 React 中較少使用）也是一種傳遞數據的方式，尤其是在復雜的場景中。可以創建一個中央事件管理器，然后跨組件觸發事件和監聽事件。

這種方式通常更少用于 React 中，除非有特定的場景需求。

6. 通過 Local Storage / Session Storage

• 在需要多個組件或者不同頁面間共享數據時，可以利用瀏覽器的 localStorage 或 sessionStorage，來存儲數據，然后在組件中讀取。

示例：

// 組件 A
useEffect(() => {localStorage.setItem('data', 'Hello from LocalStorage');
}, []);// 組件 B
const data = localStorage.getItem('data');
console.log(data); // 輸出: Hello from LocalStorage

7. 通過 URL 查詢參數傳遞數據

• 通過 URL 的查詢參數（例如，?key=value）傳遞數據，適用于需要在不同路由間共享數據的場景。

示例：

import { useLocation } from 'react-router-dom';function ChildComponent() {const location = useLocation();const queryParams = new URLSearchParams(location.search);const data = queryParams.get('data');return <div>{data}</div>;
}

總結

• 父子組件傳遞數據：通過 props 或回調函數。
• 跨層級組件傳遞數據：通過 Context API。
• 全局狀態管理：通過 Redux 或其他狀態管理庫。
• 存儲和路由傳遞數據：通過 localStorage, sessionStorage, 或 URL 查詢參數。

根據實際需求和應用規模，選擇合適的方式來管理和傳遞數據。