在 React 中，组件之间传递变量的常见方法

在 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 查询参数。

根据实际需求和应用规模，选择合适的方式来管理和传递数据。