当前位置：首页 > React

react如何接收数据

2026-01-16 08:40:49React

React 接收数据的方法

React 中接收数据的方式有多种，根据数据来源和场景的不同，可以选择适合的方法。以下是常见的几种方式：

Props 传递数据

父组件通过 props 向子组件传递数据，子组件通过 props 或解构方式接收数据。

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

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

使用 Context API

Context 提供了一种跨组件层级传递数据的方式，无需手动逐层传递 props。

// 创建 Context
const DataContext = React.createContext();

// 提供数据的组件
function ParentComponent() {
  const data = "Context Data";
  return (
    <DataContext.Provider value={data}>
      <ChildComponent />
    </DataContext.Provider>
  );
}

// 消费数据的组件
function ChildComponent() {
  const data = React.useContext(DataContext);
  return <div>{data}</div>;
}

从 API 获取数据

使用 fetch 或 axios 从后端 API 获取数据，通常在 useEffect 钩子中发起请求。

import React, { useState, useEffect } from "react";

function DataFetchingComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch("https://api.example.com/data")
      .then((response) => response.json())
      .then((data) => setData(data));
  }, []);

  return <div>{data && data.message}</div>;
}

使用状态管理库

Redux 或 MobX 等状态管理库可以集中管理数据，组件通过连接或钩子接收数据。

// Redux 示例
import { useSelector } from "react-redux";

function ReduxComponent() {
  const data = useSelector((state) => state.data);
  return <div>{data}</div>;
}

事件监听与回调

通过事件监听或回调函数接收子组件传递的数据。

// 父组件
function ParentComponent() {
  const handleData = (data) => {
    console.log("Received data:", data);
  };
  return <ChildComponent onDataReceived={handleData} />;
}

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

使用自定义 Hook

封装数据获取逻辑到自定义 Hook，组件通过调用 Hook 接收数据。

function useFetchData(url) {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url)
      .then((response) => response.json())
      .then((data) => setData(data));
  }, [url]);

  return data;
}

function CustomHookComponent() {
  const data = useFetchData("https://api.example.com/data");
  return <div>{data && data.message}</div>;
}

以上方法涵盖了 React 中接收数据的常见场景，可以根据实际需求选择合适的方式。

react如何接收数据