如何在React页面间传递数据？从Datatable.jsx向Single.jsx传值

1. 父子组件场景：通过Props传递 #

如果Single.jsx是Datatable.jsx的子组件，直接用props传值最直接：

• 在Datatable.jsx中导入并渲染Single组件，将data作为props传入：

import Single from './Single';

function Datatable() {
  const [data, setData] = useState([]);
  
  // ...其他业务逻辑
  
  return (
    <div>
      {/* 页面其他内容 */}
      <Single data={data} />
    </div>
  );
}

• 在Single.jsx中接收并使用props：

function Single({ data }) {
  // 直接使用传入的data
  return <div>{/* 渲染data相关内容 */}</div>;
}

2. 跨层级/兄弟组件场景：使用Context API #

如果两个组件没有直接父子关系，或者层级嵌套较深，用Context共享状态更高效：

• 先创建一个Context文件（比如DataContext.js）：

import { createContext, useContext } from 'react';

const DataContext = createContext();

export function DataProvider({ children, data }) {
  return (
    <DataContext.Provider value={data}>
      {children}
    </DataContext.Provider>
  );
}

export function useData() {
  return useContext(DataContext);
}

• 在两者共同的上层组件（比如App.jsx）中用Provider包裹组件树：

import { DataProvider } from './DataContext';
import Datatable from './Datatable';
import Single from './Single';

function App() {
  // 若data仅在Datatable内部定义，也可把Provider放在Datatable中，包裹需要共享的部分
  return (
    <DataProvider data={data}>
      <Datatable />
      <Single />
    </DataProvider>
  );
}

• 在Single.jsx中用自定义Hook获取data：

import { useData } from './DataContext';

function Single() {
  const data = useData();
  // 使用data
  return <div>{/* 渲染内容 */}</div>;
}

3. 路由跳转场景：通过路由state传参 #

如果是通过react-router从Datatable页面跳转到Single页面，可通过路由state传递数据：

• 在Datatable.jsx中使用useNavigate跳转并携带state：

import { useNavigate } from 'react-router-dom';

function Datatable() {
  const [data, setData] = useState([]);
  const navigate = useNavigate();
  
  const jumpToSingle = () => {
    navigate('/single', { state: { data } });
  };
  
  return (
    <div>
      <button onClick={jumpToSingle}>进入Single页面</button>
    </div>
  );
}

• 在Single.jsx中用useLocation获取state里的data：

import { useLocation } from 'react-router-dom';

function Single() {
  const location = useLocation();
  const data = location.state?.data || [];
  
  // 使用data
  return <div>{/* 渲染内容 */}</div>;
}

内容的提问来源于stack exchange，提问作者Darkpsinight