React三层组件间传递Props的最优实现方案咨询

问题背景 #

组件层级结构为：Header → Navbar → Dialog1/Dialog2，需要将Header组件内的opened1、opened2、handleDialog1、handleDialog2通过Navbar传递给对应的Dialog组件。

方案一：直接透传Props（简单场景首选） #

这种方案代码直观、无额外依赖，适合当前三层组件的简单场景。

1. 修改Header组件，传递Props给Navbar #

// header.js
import React, { useState } from "react";
import { Button, Stack } from "@mui/material";
import Navbar from "components/Navbar";

export default function Header() {
  const [opened1, setOpened1] = useState(false);
  const [opened2, setOpened2] = useState(false);

  const handleDialog1 = () => {
    setOpened1(!opened1);
  };
  const handleDialog2 = () => {
    setOpened2(!opened2);
  };

  return (
    <Stack>
      <Button onClick={handleDialog1}>我的第一个按钮</Button>
      <Button onClick={handleDialog2}>我的第二个按钮</Button>
      {/* 传递所需状态和方法给Navbar */}
      <Navbar 
        opened1={opened1} 
        opened2={opened2}
        handleDialog1={handleDialog1}
        handleDialog2={handleDialog2}
      />
    </Stack>
  );
}

2. 修改Navbar组件，接收并转发Props给Dialog #

通过解构赋值简化Props的接收和传递：

// navbar.js
import React from "react";
import { Typography, Stack } from "@mui/material";
import Dialog1 from "components/Dialog1";
import Dialog2 from "components/Dialog2";

export default function Navbar({ opened1, opened2, handleDialog1, handleDialog2 }) {
  return (
    <Stack>
      <Typography>Lorem ipsum</Typography>
      <Typography>Lorem ipsum</Typography>
      <Typography>Lorem ipsum</Typography>
      {/* 转发Props给Dialog1 */}
      <Dialog1 
        open={opened1} 
        onClose={handleDialog1}
      />
      {/* 转发Props给Dialog2 */}
      <Dialog2 
        open={opened2} 
        onClose={handleDialog2}
      />
    </Stack>
  );
}

3. 修改Dialog组件，接收并使用Props #

Dialog1和Dialog2统一通过Props接收状态和回调：

// dialog1.js
import React from "react";
import { Typography, IconButton, Dialog, DialogTitle } from "@mui/material";

export default function Dialog1({ open, onClose }) {
  return (
    <Dialog open={open} onClose={onClose}>
      <DialogTitle>
        <Typography>我的第一个对话框</Typography>
        <IconButton onClick={onClose} />
      </DialogTitle>
    </Dialog>
  );
}

// dialog2.js
import React from "react";
import { Typography, IconButton, Dialog, DialogTitle } from "@mui/material";

export default function Dialog2({ open, onClose }) {
  return (
    <Dialog open={open} onClose={onClose}>
      <DialogTitle>
        <Typography>我的第二个对话框</Typography>
        <IconButton onClick={onClose} />
      </DialogTitle>
    </Dialog>
  );
}

方案二：使用React Context（复杂场景最优） #

如果后续组件层级加深、需要传递的状态/方法增多，或者多个组件需要访问这些状态，使用Context可以避免Props透传地狱，让状态和方法在组件树中全局可访问。

1. 创建Dialog上下文 #

// contexts/DialogContext.js
import React, { createContext, useContext, useState } from "react";

// 创建上下文
const DialogContext = createContext();

// 提供上下文的Provider组件
export function DialogProvider({ children }) {
  const [opened1, setOpened1] = useState(false);
  const [opened2, setOpened2] = useState(false);

  const handleDialog1 = () => {
    setOpened1(!opened1);
  };
  const handleDialog2 = () => {
    setOpened2(!opened2);
  };

  return (
    <DialogContext.Provider value={{
      opened1,
      opened2,
      handleDialog1,
      handleDialog2
    }}>
      {children}
    </DialogContext.Provider>
  );
}

// 自定义Hook，简化上下文的使用
export function useDialog() {
  return useContext(DialogContext);
}

2. 在应用根节点包裹Provider #

将Header组件放在DialogProvider内部，让所有子组件都能访问上下文：

// App.js（示例根组件）
import { DialogProvider } from "./contexts/DialogContext";
import Header from "./components/Header";

function App() {
  return (
    <DialogProvider>
      <Header />
    </DialogProvider>
  );
}

3. 修改Header组件，通过Hook获取上下文 #

// header.js
import React from "react";
import { Button, Stack } from "@mui/material";
import Navbar from "components/Navbar";
import { useDialog } from "contexts/DialogContext";

export default function Header() {
  // 从上下文获取回调方法
  const { handleDialog1, handleDialog2 } = useDialog();

  return (
    <Stack>
      <Button onClick={handleDialog1}>我的第一个按钮</Button>
      <Button onClick={handleDialog2}>我的第二个按钮</Button>
      <Navbar />
    </Stack>
  );
}

4. 修改Navbar组件，无需再传递Props #

Navbar不再需要接收和转发Props，直接渲染Dialog即可：

// navbar.js
import React from "react";
import { Typography, Stack } from "@mui/material";
import Dialog1 from "components/Dialog1";
import Dialog2 from "components/Dialog2";

export default function Navbar() {
  return (
    <Stack>
      <Typography>Lorem ipsum</Typography>
      <Typography>Lorem ipsum</Typography>
      <Typography>Lorem ipsum</Typography>
      <Dialog1 />
      <Dialog2 />
    </Stack>
  );
}

5. 修改Dialog组件，通过Hook获取上下文 #

// dialog1.js
import React from "react";
import { Typography, IconButton, Dialog, DialogTitle } from "@mui/material";
import { useDialog } from "contexts/DialogContext";

export default function Dialog1() {
  const { opened1, handleDialog1 } = useDialog();
  return (
    <Dialog open={opened1} onClose={handleDialog1}>
      <DialogTitle>
        <Typography>我的第一个对话框</Typography>
        <IconButton onClick={handleDialog1} />
      </DialogTitle>
    </Dialog>
  );
}

// dialog2.js
import React from "react";
import { Typography, IconButton, Dialog, DialogTitle } from "@mui/material";
import { useDialog } from "contexts/DialogContext";

export default function Dialog2() {
  const { opened2, handleDialog2 } = useDialog();
  return (
    <Dialog open={opened2} onClose={handleDialog2}>
      <DialogTitle>
        <Typography>我的第二个对话框</Typography>
        <IconButton onClick={handleDialog2} />
      </DialogTitle>
    </Dialog>
  );
}

方案选择建议 #

• 直接透传Props：适合当前三层组件的简单场景，代码简洁、容易维护。
• React Context：适合组件层级较深、状态需要被多个组件共享的复杂场景，彻底解决Props透传问题。

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