## 如何在 React 中实现从父组件到同级子组件的传值？

学习知识要善于思考，思考，再思考！今天golang学习网小编就给大家带来《## 如何在 React 中实现从父组件到同级子组件的传值？》，以下内容主要包含等知识点，如果你正在学习或准备学习文章，就都不要错过本文啦~让我们一起来看看吧，能帮助到你就更好了！

从父组件传值到同级子组件的最佳实践

在应用开发中，有时我们需要向同级子组件传递数据。本文将探讨两种实现此需求的有效方案。

1. 层层传值

此方法涉及将数据从父组件逐层传递给目标子组件。首先，在父组件中创建一个状态来存储数据。然后，将此状态及其更新函数传递给中间子组件，再将数据传递给目标子组件。

2. react context

react context 是一种内置的机制，可为组件之间的通信提供一个全局存储。使用 context，您可以将数据从提供程序组件传播到其中的所有子组件。目标子组件只需直接使用该数据即可。

代码演示

层层传值：

// 父组件

  
    
          </d>
  </b>
  <c />
</a>

// 子组件 d
function d(props) {
  const { setvalue } = props;
  return <textarea onchange={e => setvalue(e.target.value)} />;
}

// 子组件 c
function c(props) {
  const { value } = props;
  return <button onclick={() => alert(value)}>获取值</button>;
}</pre><p><strong>react context：</strong></p><pre class="brush:php;toolbar:false">// 父组件
<TextareaContext.Provider value={value}>
  <B />
  <D />
  <C />
</TextareaContext.Provider>

// 子组件 D
function D() {
  const { value, setValue } = useContext(TextareaContext);
  return <textarea value={value} onChange={e => setValue(e.target.value)} />;
}

// 子组件 C
function C() {
  const { value } = useContext(TextareaContext);
  return <button onClick={() => alert(value)}>获取值</button>;
}</pre><p>这两种方法都可以在 react 中有效地实现从父组件向同级子组件传递数据。选择哪种方法取决于您应用程序的具体需求和偏好。</p><p>今天关于《## 如何在 React 中实现从父组件到同级子组件的传值？》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！</p>      </div>
        <div class="labsList">
                    </div>
          </div>

         <!-- 最新阅读 -->
     <div class="contBoxNor">
      <div class="contTit">
        <div class="tit">相关阅读</div>
        <a href="/articlelist.html" class="more">更多></a>
      </div>
      <ul class="latestReadList">
                <li>
          <div class="info">
                                  <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                          |  1年前  |  
                                       <a href="javascript:;" class="aLightGray" title="CSS">CSS</a>
                                                 <a href="javascript:;" class="aLightGray" title="优化">优化</a>
                                                 <a href="javascript:;" class="aLightGray" title="体验">体验</a>
                      </div>
          <div class="tit lineOverflow"><a href="/article/72840.html"  title="优化用户界面体验的秘密武器：CSS开发项目经验大揭秘" class="aBlack">优化用户界面体验的秘密武器：CSS开发项目经验大揭秘</a></div>
          <div class="opt">
            <span><i class="view"></i>501</span>
            <span class="collectBtn user_collection" data-id="72840" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
          </div>
        </li>
                <li>
          <div class="info">
                                  <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                          |  1年前  |  
                                       <a href="javascript:;" class="aLightGray" title="图片轮播">图片轮播</a>
                                                 <a href="javascript:;" class="aLightGray" title="微信小程序">微信小程序</a>
                                                 <a href="javascript:;" class="aLightGray" title="特效">特效</a>
                      </div>
          <div class="tit lineOverflow"><a href="/article/76259.html"  title="使用微信小程序实现图片轮播特效" class="aBlack">使用微信小程序实现图片轮播特效</a></div>
          <div class="opt">
            <span><i class="view"></i>501</span>
            <span class="collectBtn user_collection" data-id="76259" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
          </div>
        </li>
                <li>
          <div class="info">
                                  <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                          |  1年前  |  
                                       <a href="javascript:;" class="aLightGray" title="sessionStorage">sessionStorage</a>
                                                 <a href="javascript:;" class="aLightGray" title="存储能力">存储能力</a>
                                                 <a href="javascript:;" class="aLightGray" title="限制解析">限制解析</a>
                      </div>
          <div class="tit lineOverflow"><a href="/article/83771.html"  title="解析sessionStorage的存储能力与限制" class="aBlack">解析sessionStorage的存储能力与限制</a></div>
          <div class="opt">
            <span><i class="view"></i>501</span>
            <span class="collectBtn user_collection" data-id="83771" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
          </div>
        </li>
                <li>
          <div class="info">
                                  <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                          |  1年前  |  
                                       <a href="javascript:;" class="aLightGray" title="团队合作">团队合作</a>
                                                 <a href="javascript:;" class="aLightGray" title="冒泡事件">冒泡事件</a>
                                                 <a href="javascript:;" class="aLightGray" title="促进作用">促进作用</a>
                      </div>
          <div class="tit lineOverflow"><a href="/article/85057.html"  title="探索冒泡活动对于团队合作的推动力" class="aBlack">探索冒泡活动对于团队合作的推动力</a></div>
          <div class="opt">
            <span><i class="view"></i>501</span>
            <span class="collectBtn user_collection" data-id="85057" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
          </div>
        </li>
                <li>
          <div class="info">
                                  <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                          |  1年前  |  
            </div>
          <div class="tit lineOverflow"><a href="/article/91359.html"  title="UI设计中为何选择绝对定位的智慧之道" class="aBlack">UI设计中为何选择绝对定位的智慧之道</a></div>
          <div class="opt">
            <span><i class="view"></i>501</span>
            <span class="collectBtn user_collection" data-id="91359" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
          </div>
        </li>
              </ul>
    </div>
         <!-- 最新阅读 -->
      <div class="contBoxNor">
          <div class="contTit">
              <div class="tit">最新阅读</div>
              <a href="/articlelist.html" class="more">更多></a>
          </div>
          <ul class="latestReadList">
                            <li>
                  <div class="info">
                                            <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                            <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                                              |  29分钟前  |  
                      </div>
                  <div class="tit lineOverflow"><a href="/article/208575.html"  title="JavaScript中Array.find方法的实用技巧" class="aBlack">JavaScript中Array.find方法的实用技巧</a></div>
                  <div class="opt">
                      <span><i class="view"></i>195</span>
                      <span class="collectBtn user_collection" data-id="208575" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
                  </div>
              </li>
                            <li>
                  <div class="info">
                                            <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                            <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                                              |  31分钟前  |  
                      </div>
                  <div class="tit lineOverflow"><a href="/article/208574.html"  title="HTML中display的8种用法，CSS显示属性全解析" class="aBlack">HTML中display的8种用法，CSS显示属性全解析</a></div>
                  <div class="opt">
                      <span><i class="view"></i>273</span>
                      <span class="collectBtn user_collection" data-id="208574" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
                  </div>
              </li>
                            <li>
                  <div class="info">
                                            <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                            <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                                              |  38分钟前  |  
                                            <a href="javascript:;" class="aLightGray" title="webp">webp</a>
                                            <a href="javascript:;" class="aLightGray" title="懒加载">懒加载</a>
                                            <a href="javascript:;" class="aLightGray" title="Promise">Promise</a>
                                            <a href="javascript:;" class="aLightGray" title="onload">onload</a>
                                            <a href="javascript:;" class="aLightGray" title="onerror">onerror</a>
                      </div>
                  <div class="tit lineOverflow"><a href="/article/208570.html"  title="JavaScript检测图片加载完成方法" class="aBlack">JavaScript检测图片加载完成方法</a></div>
                  <div class="opt">
                      <span><i class="view"></i>360</span>
                      <span class="collectBtn user_collection" data-id="208570" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
                  </div>
              </li>
                            <li>
                  <div class="info">
                                            <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                            <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                                              |  40分钟前  |  
                                            <a href="javascript:;" class="aLightGray" title="CSS样式">CSS样式</a>
                                            <a href="javascript:;" class="aLightGray" title="A标签">A标签</a>
                                            <a href="javascript:;" class="aLightGray" title="href属性">href属性</a>
                                            <a href="javascript:;" class="aLightGray" title="target属性">target属性</a>
                                            <a href="javascript:;" class="aLightGray" title="title属性">title属性</a>
                      </div>
                  <div class="tit lineOverflow"><a href="/article/208569.html"  title="a标签详解：html超链接的应用与含义" class="aBlack">a标签详解：html超链接的应用与含义</a></div>
                  <div class="opt">
                      <span><i class="view"></i>157</span>
                      <span class="collectBtn user_collection" data-id="208569" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
                  </div>
              </li>
                            <li>
                  <div class="info">
                                            <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                            <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                                              |  59分钟前  |  
                      </div>
                  <div class="tit lineOverflow"><a href="/article/208561.html"  title="js发送POST请求方法及示例代码" class="aBlack">js发送POST请求方法及示例代码</a></div>
                  <div class="opt">
                      <span><i class="view"></i>399</span>
                      <span class="collectBtn user_collection" data-id="208561" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
                  </div>
              </li>
                            <li>
                  <div class="info">
                                            <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                            <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                                              |  1小时前  |  
                      </div>
                  <div class="tit lineOverflow"><a href="/article/208559.html"  title="Vue.js中CompositionAPI与OptionsAPI对比使用" class="aBlack">Vue.js中CompositionAPI与OptionsAPI对比使用</a></div>
                  <div class="opt">
                      <span><i class="view"></i>288</span>
                      <span class="collectBtn user_collection" data-id="208559" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
                  </div>
              </li>
                            <li>
                  <div class="info">
                                            <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                            <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                                              |  1小时前  |  
                      </div>
                  <div class="tit lineOverflow"><a href="/article/208558.html"  title="JavaScript错误边界的最佳实践指南" class="aBlack">JavaScript错误边界的最佳实践指南</a></div>
                  <div class="opt">
                      <span><i class="view"></i>186</span>
                      <span class="collectBtn user_collection" data-id="208558" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
                  </div>
              </li>
                            <li>
                  <div class="info">
                                            <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                            <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                                              |  1小时前  |  
                                            <a href="javascript:;" class="aLightGray" title="headers">headers</a>
                                            <a href="javascript:;" class="aLightGray" title="td">td</a>
                                            <a href="javascript:;" class="aLightGray" title="colspan">colspan</a>
                                            <a href="javascript:;" class="aLightGray" title="rowspan">rowspan</a>
                                            <a href="javascript:;" class="aLightGray" title="TableData">TableData</a>
                      </div>
                  <div class="tit lineOverflow"><a href="/article/208551.html"  title="td在html中的作用：详解表格单元格td" class="aBlack">td在html中的作用：详解表格单元格td</a></div>
                  <div class="opt">
                      <span><i class="view"></i>433</span>
                      <span class="collectBtn user_collection" data-id="208551" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
                  </div>
              </li>
                            <li>
                  <div class="info">
                                            <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                            <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                                              |  1小时前  |  
                      </div>
                  <div class="tit lineOverflow"><a href="/article/208542.html"  title="JavaScript如何检测字符串中是否有子串？" class="aBlack">JavaScript如何检测字符串中是否有子串？</a></div>
                  <div class="opt">
                      <span><i class="view"></i>167</span>
                      <span class="collectBtn user_collection" data-id="208542" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
                  </div>
              </li>
                            <li>
                  <div class="info">
                                            <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                            <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                                              |  1小时前  |  
                      </div>
                  <div class="tit lineOverflow"><a href="/article/208534.html"  title="JavaScript中try-catch块使用及实例详解" class="aBlack">JavaScript中try-catch块使用及实例详解</a></div>
                  <div class="opt">
                      <span><i class="view"></i>402</span>
                      <span class="collectBtn user_collection" data-id="208534" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
                  </div>
              </li>
                            <li>
                  <div class="info">
                                            <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                            <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                                              |  2小时前  |  
                      </div>
                  <div class="tit lineOverflow"><a href="/article/208529.html"  title="JavaScript中巧用中间件提升开发效率方法" class="aBlack">JavaScript中巧用中间件提升开发效率方法</a></div>
                  <div class="opt">
                      <span><i class="view"></i>373</span>
                      <span class="collectBtn user_collection" data-id="208529" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
                  </div>
              </li>
                            <li>
                  <div class="info">
                                            <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                            <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                                              |  2小时前  |  
                      </div>
                  <div class="tit lineOverflow"><a href="/article/208507.html"  title="JavaScript文件下载技巧与实现方法" class="aBlack">JavaScript文件下载技巧与实现方法</a></div>
                  <div class="opt">
                      <span><i class="view"></i>289</span>
                      <span class="collectBtn user_collection" data-id="208507" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
                  </div>
              </li>
                        </ul>
      </div>
    <!-- 课程推荐 -->
    <div class="contBoxNor">
      <div class="contTit">
        <div class="tit">课程推荐</div>
        <a href="/courselist.html" class="more">更多></a>
      </div>
      <ul class="classRecomList">
                <li>
          <a href="/course/9.html" title="前端进阶之JavaScript设计模式" class="img_box">
            <img src="/uploads/20221222/52fd0f23a454c71029c2c72d206ed815.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="前端进阶之JavaScript设计模式">
                      </a>
          <dl>
            <dt class="lineOverflow">
              前端进阶之JavaScript设计模式            </dt>
            <dd class="cont1 lineOverflow">设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。</dd>
            <dd class="cont2">
              <a href="/course/9.html" title="前端进阶之JavaScript设计模式" class="toStudy">立即学习</a>
              <span>542次学习</span>
            </dd>
          </dl>
        </li>
                <li>
          <a href="/course/2.html" title="GO语言核心编程课程" class="img_box">
            <img src="/uploads/20221221/634ad7404159bfefc6a54a564d437b5f.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="GO语言核心编程课程">
                      </a>
          <dl>
            <dt class="lineOverflow">
              GO语言核心编程课程            </dt>
            <dd class="cont1 lineOverflow">本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。</dd>
            <dd class="cont2">
              <a href="/course/2.html" title="GO语言核心编程课程" class="toStudy">立即学习</a>
              <span>508次学习</span>
            </dd>
          </dl>
        </li>
                <li>
          <a href="/course/74.html" title="简单聊聊mysql8与网络通信" class="img_box">
            <img src="/uploads/20240103/bad35fe14edbd214bee16f88343ac57c.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="简单聊聊mysql8与网络通信">
                      </a>
          <dl>
            <dt class="lineOverflow">
              简单聊聊mysql8与网络通信            </dt>
            <dd class="cont1 lineOverflow">如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让</dd>
            <dd class="cont2">
              <a href="/course/74.html" title="简单聊聊mysql8与网络通信" class="toStudy">立即学习</a>
              <span>497次学习</span>
            </dd>
          </dl>
        </li>
                <li>
          <a href="/course/57.html" title="JavaScript正则表达式基础与实战" class="img_box">
            <img src="/uploads/20221226/bbe4083bb3cb0dd135fb02c31c3785fb.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="JavaScript正则表达式基础与实战">
                      </a>
          <dl>
            <dt class="lineOverflow">
              JavaScript正则表达式基础与实战            </dt>
            <dd class="cont1 lineOverflow">在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。</dd>
            <dd class="cont2">
              <a href="/course/57.html" title="JavaScript正则表达式基础与实战" class="toStudy">立即学习</a>
              <span>487次学习</span>
            </dd>
          </dl>
        </li>
                <li>
          <a href="/course/28.html" title="从零制作响应式网站—Grid布局" class="img_box">
            <img src="/uploads/20221223/ac110f88206daeab6c0cf38ebf5fe9ed.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="从零制作响应式网站—Grid布局">
                      </a>
          <dl>
            <dt class="lineOverflow">
              从零制作响应式网站—Grid布局            </dt>
            <dd class="cont1 lineOverflow">本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。</dd>
            <dd class="cont2">
              <a href="/course/28.html" title="从零制作响应式网站—Grid布局" class="toStudy">立即学习</a>
              <span>484次学习</span>
            </dd>
          </dl>
        </li>
              </ul>
    </div>
        </div>
  <!-- footer -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="footer">
    <ul>
      <li  ><a href="/" class="aLightGray"><em class="material-icons">home</em><span>首页</span></a></li>
      <li  class="curr"><a href="/articlelist.html" class="aLightGray"><em class="material-icons">menu_book</em><span>阅读</span></a></li>
      <li  ><a href="/courselist.html" class="aLightGray"><em class="material-icons">school</em><span>课程</span></a></li>
      <li  ><a href="/ai.html" class="aLightGray"><em class="material-icons">smart_toy</em><span>AI助手</span></a></li>
      <li ><a href="/user.html" class="aLightGray"><em class="material-icons">person</em><span>我的</span></a></li>
    </ul>
  </div>
  <script src="/assets/js/require.js" data-main="/assets/js/require-frontend.js?v=1671101972"></script>
<script>
    var _hmt = _hmt || [];
    (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?3dc5666f6478c7bf39cd5c91e597423d";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>
</body>
</html>