React组件传值方法
在React中，有几种主要的方式可以在组件之间传递数据：
1. Props（从父组件到子组件）
这是最基本和最常用的方法。父组件可以将数据作为props传递给子组件。
// 父组件
function Parent() {const data = "Hello from parent";return <Child message={data} />;
}// 子组件
function Child(props) {return <p>{props.message}</p>;
}
2. 回调函数（从子组件到父组件）
父组件可以将一个函数作为prop传递给子组件，子组件可以调用这个函数来向父组件传递数据。
// 父组件
function Parent() {const handleChildData = (data) => {console.log("Data from child:", data);};return <Child onChildData={handleChildData} />;
}// 子组件
function Child(props) {const sendDataToParent = () => {props.onChildData("Hello from child");};return <button onClick={sendDataToParent}>Send data to parent</button>;
}
3. Context API（跨多层组件传值）
当需要将数据深入传递到组件树中，而不想通过中间组件手动传递props时，可以使用Context API。
import React, { createContext, useContext } from 'react';// 创建 Context
const DataContext = createContext();// 父组件
function Parent() {const data = "Hello from context";return (<DataContext.Provider value={data}><Child /></DataContext.Provider>);
}// 子组件
function Child() {return <GrandChild />;
}// 孙组件
function GrandChild() {const data = useContext(DataContext);return <p>{data}</p>;
}
4. 状态管理库（如Redux或MobX）
对于更复杂的应用，可以使用状态管理库来处理组件间的数据传递。这里以Redux为例：
import { createStore } from 'redux';
import { Provider, useSelector, useDispatch } from 'react-redux';// Reducer
const reducer = (state = { message: '' }, action) => {switch (action.type) {case 'SET_MESSAGE':return { ...state, message: action.payload };default:return state;}
};// Store
const store = createStore(reducer);// 父组件
function App() {return (<Provider store={store}><Parent /></Provider>);
}// 子组件
function Parent() {const dispatch = useDispatch();const setMessage = () => {dispatch({ type: 'SET_MESSAGE', payload: 'Hello from Redux' });};return (<div><button onClick={setMessage}>Set message</button><Child /></div>);
}// 孙组件
function Child() {const message = useSelector(state => state.message);return <p>{message}</p>;
}
5. 自定义Hooks（组件间共享逻辑和状态）
自定义Hooks可以用来在不同组件间共享逻辑和状态。
import { useState, useEffect } from 'react';// 自定义Hook
function useSharedData() {const [data, setData] = useState('');useEffect(() => {// 模拟异步数据获取const timer = setTimeout(() => setData('Shared data'), 1000);return () => clearTimeout(timer);}, []);return data;
}// 组件A
function ComponentA() {const sharedData = useSharedData();return <p>{sharedData}</p>;
}// 组件B
function ComponentB() {const sharedData = useSharedData();return <p>{sharedData}</p>;
}
这些方法各有优缺点，适用于不同的场景。选择哪种方法取决于你的应用结构和需求。