登录注册

当前位置：首页 > 文章列表 > 文章 > 前端 > React 子组件如何向非直接父级组件传值？

React 子组件如何向非直接父级组件传值？

2024-11-06 12:46:01 0浏览 收藏

各位小伙伴们，大家好呀！看看今天我又给各位带来了什么文章？本文标题是《React 子组件如何向非直接父级组件传值？》，很明显是关于文章的文章哈哈哈，其中内容主要会涉及到等等，如果能帮到你，觉得很不错的话，欢迎各位多多点评和分享！

React 子组件如何向非直接父级组件传值？

如何让 react 子组件向同级的父组件传值？

在 react 中，有时需要让子组件向与其相关但不同级的父组件传递数据。通常情况下，react 组件只能通过 props 从父组件接收数据。

方案一：直接操作 dom

这种方法简单粗暴，直接操作 dom 来获取子组件中的数据。虽然它可能有效，但并不符合 react 的最佳实践。

方案二：层层传值

这个方法通过将数据层层传递给父组件来实现。然而，这不是一个可扩展的解决方案，随着组件树的层级增加，代码会变得笨重和难以维护。

更好的解决方案：react context

context 是 react 中的一种机制，用于在组件树中共享数据，无论它们是否嵌套或同级。这是一种更优雅、更可扩展的解决方案。

使用 context 实现

  1. 创建 context

    使用 createcontext() 函数来创建一个 context 变量，它将作为一个全局数据存储：

    const textareacontext = react.createcontext("");

  2. 提供 context

    在顶级组件（a）中，将 context 变量用 provider 组件包裹，以向它的子组件提供数据：

    const appa = () => {
  const [value, setvalue] = usestate("");
  return (
    
      
      
    
  );
};

  3. 消费 context

    在需要数据的子组件（c 和 d）中，使用 usecontext() 钩子或 consumer 组件来获取它：

    const AppD = () => {
  const { value, setValue } = useContext(TextareaContext);
  return