React 基础:在组件之间传递数据
在 React 中的组件之间传递数据是一个非常强大的概念。
在本文中,我们将研究以下两件事:
- 从父级向子级发送数据
- 将数据从孩子发送给父母
对于这个概念,我们需要使用useState
钩子。直到现在你还没有看到那个钩子。有时间我再详细写。
我们今天的结果将如下所示:
在 React 中将数据从父组件发送到子组件永久链接
React 中最轻松的数据流是自上而下地将数据从父组件传递到子组件。
让我们以当前的示例为起点。
在这个 repo 中,我们构建了一个简单的书架,上面放着几本书。
在最后一个例子中,我们循环了我们的书,但我们想将这些书作为一个对象传递。
我们可以通过像这样设置参数将它们传递到我们的书架:
<span style="color:#f8f8f2"><code style="margin-left:396px" class="language-jsx"><span style="color:#ffa07a"><span style="color:#ffa07a"><span style="color:#fefefe"><</span>Bookshelf</span> <span style="color:#abe338">books</span><span style="color:#fefefe">=</span><span style="color:#fefefe">{</span>books<span style="color:#fefefe">}</span><span style="color:#fefefe">></span></span><span style="color:#ffa07a"><span style="color:#ffa07a"><span style="color:#fefefe"></</span>Bookshelf</span><span style="color:#fefefe">></span></span></code></span>
然后我们需要做的就是将我们的书架代码更改为如下所示:
<span style="color:#f8f8f2"><code style="margin-left:396px" class="language-jsx"><span style="color:#00e0e0">import</span> Book <span style="color:#00e0e0">from</span> <span style="color:#abe338">'./Book'</span><span style="color:#fefefe">;</span>
<span style="color:#00e0e0">export</span> <span style="color:#00e0e0">default</span> <span style="color:#00e0e0">function</span> <span style="color:gold">Bookshelf</span><span style="color:#fefefe">(</span><span style="color:#fefefe">{</span> books <span style="color:#fefefe">}</span><span style="color:#fefefe">)</span> <span style="color:#fefefe">{</span>
<span style="color:#00e0e0">return</span> <span style="color:#fefefe">(</span>
<span style="color:#ffa07a"><span style="color:#ffa07a"><span style="color:#fefefe"><</span>div</span><span style="color:#fefefe">></span></span>
<span style="color:#fefefe">{</span>books<span style="color:#fefefe">.</span><span style="color:gold">map</span><span style="color:#fefefe">(</span><span style="color:#fefefe">(</span>book<span style="color:#fefefe">)</span> <span style="color:#00e0e0">=></span> <span style="color:#fefefe">(</span>
<span style="color:#ffa07a"><span style="color:#ffa07a"><span style="color:#fefefe"><</span>Book</span> <span style="color:#abe338">title</span><span style="color:#fefefe">=</span><span style="color:#fefefe">{</span>book<span style="color:#fefefe">.</span>title<span style="color:#fefefe">}</span> <span style="color:#abe338">key</span><span style="color:#fefefe">=</span><span style="color:#fefefe">{</span>book<span style="color:#fefefe">.</span>id<span style="color:#fefefe">}</span> <span style="color:#fefefe">/></span></span>
<span style="color:#fefefe">)</span><span style="color:#fefefe">)</span><span style="color:#fefefe">}</span>
<span style="color:#ffa07a"><span style="color:#ffa07a"><span style="color:#fefefe"></</span>div</span><span style="color:#fefefe">></span></span>
<span style="color:#fefefe">)</span><span style="color:#fefefe">;</span>
<span style="color:#fefefe">}</span></code></span>
这进一步分离了我们的数据,我们现在可以用自己的一套书创建多个书架。
这样做很酷的部分是它也可以在特定的动作上完成。
让我们回到我们的App.js
文件并设置一个新状态来向您展示我的意思。
<span style="color:#f8f8f2"><code style="margin-left:396px" class="language-jsx"><span style="color:#00e0e0">const</span> <span style="color:#fefefe">[</span>books<span style="color:#fefefe">,</span> setBooks<span style="color:#fefefe">]</span> <span style="color:#00e0e0">=</span> <span style="color:gold">useState</span><span style="color:#fefefe">(</span><span style="color:#fefefe">[</span><span style="color:#fefefe">]</span><span style="color:#fefefe">)</span><span style="color:#fefefe">;</span></code></span>
请注意,我们也将其命名
books
为,因此将顶部数据集重命名为booksData
现在我们可以添加一个按钮来onClick
加载我们的书籍。
<span style="color:#f8f8f2"><code style="margin-left:396px" class="language-jsx"><span style="color:#ffa07a"><span style="color:#ffa07a"><span style="color:#fefefe"><</span>button</span> <span style="color:#abe338">onClick</span><span style="color:#fefefe">=</span><span style="color:#fefefe">{</span><span style="color:#fefefe">(</span><span style="color:#fefefe">)</span> <span style="color:#00e0e0">=></span> <span style="color:gold">setBooks</span><span style="color:#fefefe">(</span>booksData<span style="color:#fefefe">)</span><span style="color:#fefefe">}</span><span style="color:#fefefe">></span></span>Load the books<span style="color:#ffa07a"><span style="color:#ffa07a"><span style="color:#fefefe"></</span>button</span><span style="color:#fefefe">></span></span></code></span>
现在你走了,我们的书只有在我们点击按钮时才会加载。
在 React 中将数据从子组件发送到父组件永久链接
现在我们可以将数据从我们的父组件发送到我们的子组件,让我们看看它是如何工作的。
我们想要实现的是我们可以选择知道点击了哪本书。
但是,对于这种方法,父组件必须有一种方法来接收这些数据。
让我们打开我们的Bookshelf.js
代码,因为它充当我们实际书籍的父级。添加新状态以跟踪当前书籍。
<span style="color:#f8f8f2"><code style="margin-left:396px" class="language-jsx"><span style="color:#00e0e0">const</span> <span style="color:#fefefe">[</span>currentBook<span style="color:#fefefe">,</span> setCurrentBook<span style="color:#fefefe">]</span> <span style="color:#00e0e0">=</span> <span style="color:gold">useState</span><span style="color:#fefefe">(</span><span style="color:#abe338">''</span><span style="color:#fefefe">)</span><span style="color:#fefefe">;</span></code></span>
然后我们可以显示当前的书,如果它被设置了:
<span style="color:#f8f8f2"><code style="margin-left:396px" class="language-jsx"><span style="color:#fefefe">{</span>currentBook <span style="color:#00e0e0">&&</span> <span style="color:#ffa07a"><span style="color:#ffa07a"><span style="color:#fefefe"><</span>h1</span><span style="color:#fefefe">></span></span>Currently reading: <span style="color:#fefefe">{</span>currentBook<span style="color:#fefefe">}</span><span style="color:#ffa07a"><span style="color:#ffa07a"><span style="color:#fefefe"></</span>h1</span><span style="color:#fefefe">></span></span><span style="color:#fefefe">}</span></code></span>
我们要做的最后一件事是将 set 函数传递给我们的 book 组件,如下所示:
<span style="color:#f8f8f2"><code style="margin-left:396px" class="language-jsx"><span style="color:#ffa07a"><span style="color:#ffa07a"><span style="color:#fefefe"><</span>Book</span>
<span style="color:#abe338">setCurrentBook</span><span style="color:#fefefe">=</span><span style="color:#fefefe">{</span>setCurrentBook<span style="color:#fefefe">}</span>
<span style="color:#abe338">title</span><span style="color:#fefefe">=</span><span style="color:#fefefe">{</span>book<span style="color:#fefefe">.</span>title<span style="color:#fefefe">}</span>
<span style="color:#abe338">key</span><span style="color:#fefefe">=</span><span style="color:#fefefe">{</span>book<span style="color:#fefefe">.</span>id<span style="color:#fefefe">}</span>
<span style="color:#fefefe">/></span></span></code></span>
在 book 组件内部,我们需要接受这个函数作为参数。我们可以添加一个onClick
处理程序来调用这个函数并将标题传回。
<span style="color:#f8f8f2"><code style="margin-left:396px" class="language-jsx"><span style="color:#00e0e0">export</span> <span style="color:#00e0e0">default</span> <span style="color:#00e0e0">function</span> <span style="color:gold">Book</span><span style="color:#fefefe">(</span><span style="color:#fefefe">{</span> title<span style="color:#fefefe">,</span> setCurrentBook <span style="color:#fefefe">}</span><span style="color:#fefefe">)</span> <span style="color:#fefefe">{</span>
<span style="color:#00e0e0">return</span> <span style="color:#ffa07a"><span style="color:#ffa07a"><span style="color:#fefefe"><</span>div</span> <span style="color:#abe338">onClick</span><span style="color:#fefefe">=</span><span style="color:#fefefe">{</span><span style="color:#fefefe">(</span><span style="color:#fefefe">)</span> <span style="color:#00e0e0">=></span> <span style="color:gold">setCurrentBook</span><span style="color:#fefefe">(</span>title<span style="color:#fefefe">)</span><span style="color:#fefefe">}</span><span style="color:#fefefe">></span></span><span style="color:#fefefe">{</span>title<span style="color:#fefefe">}</span><span style="color:#ffa07a"><span style="color:#ffa07a"><span style="color:#fefefe"></</span>div</span><span style="color:#fefefe">></span></span><span style="color:#fefefe">;</span>
<span style="color:#fefefe">}</span></code></span>
你去吧。我们现在可以通过两种方式绑定数据。从父母到孩子,反之亦然。
你可以在上面找到完整的代码 GitHub.
感谢您的阅读,让我们联系!永久链接
相关文章
- 基于Apache组件,分析对象池原理
- 【微信小程序】-- 常用的基础内容组件介绍 -- text & rich-text & progress & icon(七)
- 微信小程序 自定义组件(modal) 引入组件
- 小程序基础-组件
- React和Vue组件间数据传递demo
- 《移动安全》(1)Android开发基础:安卓操作系统架构与应用程序组件
- 《iOS组件与框架——iOS SDK高级特性剖析》——第2章,第2.3节显示地图
- Kubernetes组件-DaemonSet
- 03-vue基础-组件
- SwiftUI 手势大全之拖拽组件实现雷达效果(教程含源码)
- SwiftUI 基础组件之可扩展的多彩List表格(教程含源码)
- SwiftUI 代码库之 42 Form组件和Stepper 基础使用
- SwiftUI基础组件之Link打开URL网页链接 (教程含源码)
- SwiftUI 实战之紧凑版时间和日期选择组件(UIDatePicker教程含源码)
- Flutter 基础组件之 Text文本组件使用大全(教程含源码)
- SwiftUI CloudKit 核心对象与组件之 06 CloudKit 如何删除资源文件
- macOS基础组件之文本编辑器MacEditorTextView
- react项目Bug:组件销毁清除监听(Can't perform a React state update on an unmounted component.)
- 微信小程序~基础组件
- Vue组件进阶知识总结
- 手把手学习Vue3.0:Vue3.0正确使用Bus总线mitt实现组件间通信和传参
- 基于 STM32CubeMX 添加 RT-Thread 操作系统组件(五)- 串口重映射到 rt_kprintf 函数
- vue基础八(路由组件)
- 微盟电子商城网络交易系统——Day02【SpringCloud Alibaba、分布式组件、前端基础、java8特性】
- android基于开源网络框架asychhttpclient,二次封装为通用网络请求组件
- Activiti Model Editor组件
- 深入浅出 React 高阶组件
- 从0开发游戏引擎之2D基础组件的实现(Image;Label;Button)