当前位置：首页 > React

react如何传数据

2026-02-26 07:17:02React

在 React 中传递数据的方法

父组件向子组件传递数据（Props）

父组件通过属性（props）将数据传递给子组件。子组件通过 props 接收数据。

父组件代码示例：

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

子组件代码示例：

function ChildComponent(props) {
  return <div>{props.message}</div>;
}

子组件向父组件传递数据（回调函数）

父组件定义一个回调函数，通过 props 传递给子组件。子组件调用该函数并传递数据。

父组件代码示例：

function ParentComponent() {
  const handleData = (data) => {
    console.log(data);
  };
  return <ChildComponent onData={handleData} />;
}

子组件代码示例：

function ChildComponent({ onData }) {
  const sendData = () => {
    onData("Data from Child");
  };
  return <button onClick={sendData}>Send Data</button>;
}

使用 Context API 跨组件传递数据

Context 提供了一种在组件之间共享数据的方式，而不必显式地通过组件树的逐层传递 props。

创建 Context 示例：

const MyContext = React.createContext();

function App() {
  return (
    <MyContext.Provider value="Shared Data">
      <ChildComponent />
    </MyContext.Provider>
  );
}

function ChildComponent() {
  const data = useContext(MyContext);
  return <div>{data}</div>;
}

使用状态管理库（如 Redux）

对于复杂应用，可以使用 Redux 等状态管理库来全局管理数据。

安装 Redux：

npm install redux react-redux

创建 store 示例：

import { createStore } from 'redux';
import { Provider } from 'react-redux';

const reducer = (state = {}, action) => {
  switch (action.type) {
    case 'SET_DATA':
      return { ...state, data: action.payload };
    default:
      return state;
  }
};

const store = createStore(reducer);

function App() {
  return (
    <Provider store={store}>
      <ChildComponent />
    </Provider>
  );
}

组件中使用示例：

import { useSelector, useDispatch } from 'react-redux';

function ChildComponent() {
  const data = useSelector(state => state.data);
  const dispatch = useDispatch();

  const updateData = () => {
    dispatch({ type: 'SET_DATA', payload: 'New Data' });
  };

  return (
    <div>
      <div>{data}</div>
      <button onClick={updateData}>Update Data</button>
    </div>
  );
}

使用自定义 Hook 共享逻辑

可以创建自定义 Hook 来封装和共享有状态逻辑。

自定义 Hook 示例：

function useSharedData(initialValue) {
  const [data, setData] = useState(initialValue);
  return { data, setData };
}

function ComponentA() {
  const { data, setData } = useSharedData("Initial");
  return (
    <div>
      <div>{data}</div>
      <button onClick={() => setData("Updated")}>Update</button>
    </div>
  );
}

function ComponentB() {
  const { data } = useSharedData("Initial");
  return <div>{data}</div>;
}

react如何传数据